我们如何显示动态网格布局，如附带的屏幕截图，也可以在bootstrap的帮助下按编号顺序显示

Question

我想制作一个类似附加图像的布局。块会在页面上以相同的订单号呈现。

例如： - 块（1）将在块（2）之后首先显示，依此类推......

Answer 1

Masonry是一个流行的JS库来处理这个问题：http://masonry.desandro.com/

假设您的HTML看起来像这样：

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <!-- More items... -->
</div>

JS看起来像这样：

var msnry = new Masonry('#container', {
    columnWidth: 200,
    itemSelector: '.item'
});

或者如果您更喜欢jQuery：

$('#container').masonry({
    columnWidth: 200,
    itemSelector: '.item'
});

Answer 2

啊！下面这个很完美。 Check this bootply i quickly did。

{{1}}

I know you will want to push and pull once you want to rearrange the order of the div in extra small screen so this is a link to push and pull very well answered on Stack Overflow