jquery - 保持缩略图预览行均匀分布

Question

我使用 Bootstrap 和 jQuery 作为 Web 管理后端的核心基础。我添加了一个在 BS 模式中打开的“媒体 uploader ”，它工作正常，但是当图像被上传时(使用 dropzone.js 一个一个地)它们被添加到主预览区域，添加到现有的图片。

发生这种情况时，如果图像高度不同，我会得到以下结果:

我知道是什么原因，我只是想知道是否有解决此问题的简单方法。这是制作每个缩略图框的标记:

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 media-col">
    <div class="box media-box">
        <div class="box-body table-responsive">
            <img src="SOME IMAGE">
            <input type="text" class="form-control" readonly="true" value="SOME IMAGE URL">
        </div><!-- /.box-body -->
    </div><!-- /.box -->
</div>

所有图像都在单个 <div class="row"></div> 内

我的主要问题是图像缩略图的响应能力。我无法为每 X # 个图像创建一个包装器，因为每行显示的图像数量会根据屏幕分辨率发生变化。

Answer 1

问题是 float 在 CSS 中如何工作的奇怪效果。如果您理解它，这是有道理的，但如果您不理解它，就会显得很奇怪。

我建议将主要 block 设置为 display:inline-block 而不是 float:left。然后他们会自动“排”自己，不管屏幕宽度如何，像这样:

http://codepen.io/EightArmsHQ/pen/zxXOWX

另一种选择是使用砖石之类的东西，它将绝对以一种很好的方式(并且稳健地)定位所有元素。

http://masonry.desandro.com/