Php 如何实现动态高度的div tile布局，而不是使用绝对定位？

我感兴趣的是，当您抓取帖子时，如何运行WordPress查询来完成这样的布局：

正如您所见，这些框的高度各不相同（主要是因为摘录长度不同）

他们所做的看起来很棒，但是因为盒子是绝对定位的，我不相信它能很好地与反应灵敏的布局配合

---

有人有线索吗

Pinterest盒子也是绝对定位的，非常适合它们。他们每天都有大量的访问量。

没错，为了使这个布局具有响应性，你必须使用JS来重新定位他们。与Pinterest类似，这些“瓷砖”只是兄弟姐妹

但是，您可以使用。这个问题是需要一个算法来在列之间均匀分布列。Pinterest通过使用绝对定位的项目来摆脱它

对于本例，您要么在服务器端执行此操作（但不知道内容的长度，因此可能会得到不平衡的列），要么执行一些疯狂的DOM操作（您知道维度，但在DOM中执行操作很慢）

内容
内容
内容
内容
内容


内容
内容
内容
内容
内容

保险商实验室{
浮动：左；
宽度：250px；
}
李{
背景：#ccc；
利润率：0 20px 20px 0；
}
/*让我们模拟不同的内容高度*/
.a1{
高度：150像素；
}
.a2{
高度：300px；
}
.a3{
高度：450px；
}

---

​

这种布局称为动态网格布局，可能是Pinterest首先实现的。人们总是称id为“Pinterest-like网格布局”。 我有一个链接，它很好地介绍了“类似Pinterest的网格布局”，这可能会帮助您理解它

如果使用jQuery，可以考虑查看该链接所具有的列表。这里列出了5个jQuery插件

---

如果您想获得有关如何创建该布局的其他资源，请开始在谷歌上搜索“Pinterest-like Grid layout”，您会找到自己的方法。

这可能是最流行的库。此外，麻省理工学院的许可证，所以它是免费使用，没有限制。它的文档比我所看到的任何替代方案都要好得多

<ul>
    <li class="a3">content</li>
    <li class="a3">content</li>
    <li class="a2">content</li>
    <li class="a1">content</li>
    <li class="a3">content</li>
</ul>
<ul>
    <li class="a1">content</li>
    <li class="a2">content</li>
    <li class="a1">content</li>
    <li class="a3">content</li>
    <li class="a2">content</li>
</ul>

ul{
    float:left;
    width:250px;
}
li{
    background:#ccc;
    margin: 0 20px 20px 0;
}
/*let's simulate varying content height*/
.a1{
    height:150px;
}
.a2{
    height:300px;
}
.a3{
    height:450px;
}