jquery – 使用可变数目的单元格的引导网格

我有一个相册应用程序,用户可以上传最多50张照片.我想让图片连续显示4张照片.相册是动态的,用户可以通过ajax添加和删除照片.

如果添加/删除单元格而不必不断重新调整DOM元素和行,那么如何使用引导网格？

例如,如果用户加载5张图片的现有相册,则自举网格如下所示：

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
</div>

如果用户删除图片#2,网格将是(没有第二行,5个元素移动到第4个元素)

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

然后用户添加2张新照片(通过ajax),需要一个新行,另外还有2列.

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

可以引导响应式设计做这个没有行,还是应该使用浮动div？请记住,这些列都是通过ajax添加/删除(除了初始页面加载之外),所以我正在操纵DOM(行/列).重新计算每一个变化的行/列将是一个痛苦.

解决方法

首先,直接回答你的问题,你可以简单地把所有的列放在一行.

<div class="row">
    <div class="col-md-3"> <img src="1"> </div>
    <div class="col-md-3"> <img src="2"> </div>
    <div class="col-md-3"> <img src="3"> </div>
    <div class="col-md-3"> <img src="4"> </div>
    <div class="col-md-3"> <img src="5"> </div>
    ...
    <div class="col-md-3"> <img src="50"> </div>
</div>

每第四个项目(由于网格是12列,我们使用3列宽度网格= 4列).此外,此技术总是要求相等的高度列,否则您的列将不会如预期的那样换行.所以如果你的照片是不同的大小,你没有缩放它们适合在一个固定的高度,你会有一些麻烦.

上述不是“非法”的引导.如果事实上,您将看到Bootstrap网站通过在单个列上应用多个列大小的每个屏幕大小的类来实现此操作,例如Bootstrap站点的示例：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

当上述被认为是“超小”(-xs-)时,第一行中的第一列将跨越整个宽度,而第二列将跨过宽度的一半.

在第二行,你可以看到类似的东西.在“超小”的大小,您将有三个“505”宽的列,这将给你两行.

此外,如果列行的高度不匹配,您还可以看到如何使用Clearfix列的示例.他们建议插入一个空的div来清除.

我也会考虑使用一个列表,并建议不要过分思考(我使用Bootstrap时我觉得自己在做).

在这种情况下,请考虑这样的事情：

<ul id="image-list" class="row">
    <li class="col-sm-3"><img src="1"></li>
    <li class="col-sm-3"><img src="2"></li>
    ...
    <li class="col-sm-3"><img src="n-1"></li>
    <li class="col-sm-3"><img src="n"></li>
</ul>

我希望有帮助！

干杯

原文地址：https://www.jb51.cc/jquery/180481.html

jquery – 使用可变数目的单元格的引导网格

解决方法

相关推荐