动态 div 放在他们的位置
JsFiddle - 演示（列数取决于文档窗口的宽度）。
因为看起来你有常规宽度的 div，你可以尝试这样的事情：
注意：自从第一次回答这个简单的演示脚本以来，我已经大大改变了链接的 jsFiddle 演示。它现在几乎与此代码相似，但基本内容几乎相同。
CSS有点像这样
div.column {
display:inline-block; /* "Columns" should be only as wide as their setting, */
vertical-align:top; /* should sit next to each other horizontally, */
width:240px; /* and be vertically aligned. */
height:auto;
margin:10px 0px 10px 10px;
}
div.column div.row {
width:240px; /* All "row" divs are of the same width, */
height:auto; /* but of varying heights */
margin:0px 0px 10px 0px;
padding:0px;
background-color:#00f0f0;
}
JavaScript 有点像这样
(function () {
var tdw = 240 + 0 + 10; // Div width + margin-left + margin-right
window.addEventListener("load", function () {
var ww = window.innerWidth, // how much width to play with?
cn = Math.floor(ww / tdw), // how many columns will fit?
cdl = [], // memory
lc = 0, // alternation
c = 0, // iteration
ncd; // element object
while (c++ < cn) {
ncd = document.createElement("div"); // create columns
ncd.setAttribute("class", "column"); // set their class
document.body.appendChild(ncd); // add to page
cdl.push(ncd); // remember them
}
c = 0;
while (c++ < 100) { // this for demo // loop until there're no more
ncd = document.createElement("div"); // create your divs
// this could be where you add your div content
ncd.setAttribute("class", "row"); // set their class
lc = lc < cdl.length ? lc : 0; // alternate column as parent
cdl[lc++].appendChild(ncd); // add the div to the column
ncd.style.height = (200 * Math.random()) + "px"; // this for demo
// or you could add the content via innerHTML
}
}, false);
}());
这个答案是在假设很多的同时放在一起的。有了问题的更多细节，我本可以提供更完整的答案。
自从被要求解释...
据我了解这个问题，它是找到一种方法来获取动态信息（从不相关的地方提取），并用它填充 div。这些 div 中的每一个都将设置在页面上的列中（大概在“提要”容器或类似容器中）。由于这些（我们称它们为“infodivs”）infodivs 的宽度是固定的，我们可以创建固定宽度的列来包含它们。现在 div 可以自由地设置它们需要的任何高度（根据它们包含的信息），并且在它们的 parent 内简单地堆叠在一起div.column。
在页面上load，我们测量可用宽度（在实时版本中考虑偏移等），并计算水平适合多少列，然后创建这些列。为了节省对 DOM 的读取和重新读取，我们可以将列存储到数组中以便以后查找。
创建列后，我们可以自由地将动态创建的 infodiv 添加到列中，循环遍历列查找数组，为每个新的 infodiv 使用每个渐进列（在屏幕上从左到右）。一旦我们到达最后一列，我们将查找计数器设置回零，并继续加载 infodiv。
该方法导致每列填充大致相等数量的信息 div（取决于数学）。然而，没有检查每个 infodiv 的高度，因此任何列的内容都可能比其他列长得多。解决此问题的一种方法是在创建每个新 infodiv 时测量每列的高度，然后将该 infodiv 添加到最短的列中。这将导致列在高度上保持更接近相等。
注意：连接到此答案的演示 jsFiddle 现在包含一个基本功能，可在创建 infodiv 时动态测量列高。为了准确读取列高，每个图像都附加了一个临时onload侦听器，该侦听器触发下一个 infodiv 的创建。侦听器一完成就被删除，它的工作是释放资源。这种方法会减慢整个页面的加载速度，但还不够不切实际。根据实际情况，可能更需要更快的不太准确的加载。在这种情况下，丢弃图像的onload侦听器并按需创建 infodiv，而不管先前创建的那些状态如何。
进一步动态测量：onscroll仅当访问者滚动到结束他们已经看到的。这将有助于减少服务器压力并增加浏览器响应。另外：加载访问者可能永远不会滚动查看的内容是没有意义的。
所以伪术语的代码类似于：
屏幕有多宽？
制作（屏幕宽度除以列宽）列。
当我们创建新的 infodiv 时，将它们添加到列中。
不要将它们全部添加到一列中，而是平等地共享它们。
最终结果是动态创建的等宽信息 div，但高度不同，以列化方式布局。他们的自然倾向是尽可能地比他们的父母高，所以他们总是坐在他们上方的 infodiv 下方。
由于列的显示属性设置为inline，因此它们倾向于并排放置，以便它们有空间。需要注意的是，如果列的父列的宽度减小（在创建初始布局之后），最右边的列将被推到其同伴列的下方。
至于 PHP - 那是另一个故事 :-)