Php 我们如何在bootstrap的帮助下显示动态网格布局，如所附的屏幕截图（也按编号排序）

我想做一个像附加图像一样的布局。块将以相同的顺序号呈现在页面上

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

---

砌体是一个流行的JS库，用于处理此问题：

假设您的HTML如下所示：

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

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

或者，如果您更喜欢jQuery：

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

---

啊!！下面的这个很好用

1.
5.
2.
6.
3.
7.
4.
8.

---

.

@itdrake91…请检查我的问题。我想借助twitter引导而不是其他框架来完成。引导不提供任何内置方法来完成此操作。如果我的回答不清楚，我的意思是您可以/应该使用带引导的砖石结构。这里有一句直接引自官方引导文档的话：“如果你想要一个不同高度和/或宽度的Pinterest风格的缩略图演示，你需要使用第三方插件，如Mashine、同位素或Salvattore。”请看上面的答案。它展示了我想要的相同设计。是的，编码爱好者的答案看起来不错。然而，我通常看到

col-*

类被包装在

行

类中（这可能会破坏这种布局）。这可能不是Bootstrap中的官方要求，只是我一直看到的方式。只要它不影响移动响应，那么我确信它是好的……我使用了正确答案html和我的逻辑的组合来满足要求$col=4$i=50；（i=1美元$i@Coding...Situation是按此顺序呈现html（1,5,2,6,3,7,4,8）。但我想按此顺序呈现html（1,2,3,4,5,6,7,8）。有帮助吗

<div class="col-sm-3">
  <div class="col-sm-12">1</div>
  <div class="col-sm-12">5</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">2</div>
    <div class="col-sm-12">6</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">3</div>
    <div class="col-sm-12">7</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">4</div>
    <div class="col-sm-12">8</div>
</div>