我有一个相册应用程序,用户最多可以上传 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,网格将是(没有第 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(行/列)。为每次更改重新计算行/列会很痛苦。