请不要认为我的问题是重复的。我只是没能成功地尝试Display divs with different sizes with CSS
如上所述，我使用砖石结构。但没能成功。我正在使用编码器点火器。
这是我正在使用的css
#container {
width:90%;
margin:3% 0px 0px 10%;
}
.item {
margin:10px 10px 10px 10px;
float:left;
width:240px;
border:5px solid #f0f0f0;
background-color:#d2dbde;
border-radius:5px;
}
Javascript和js文件
<!-- include js files -->
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function() {
$('#container').masonry({
// options
itemSelector : '.item'
});
});
</script>
内容
<div id="container">
<div class="item">
<div id="usericon" style="width:240px;height:30px;">
<!-- content -->
</div>
<div id="name">
<!-- content -->
</div>
<div>
<a href="<?php echo $link; ?>">
<img src="<?php echo $picture = ($picture == null) ? '' : $picture; ?>" width="240px" height="auto">
</a>
</div>
我在分区中显示图像、名称、日期等
最佳答案
动态div就位
JsFiddle - Demo（列数取决于文档窗口的宽度）。
因为看起来您有规则宽度的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中的每一个都将设置在页面上（可能在“feed”容器或类似容器中）的列中。由于这些infodiv的宽度（让我们称之为“infodivs”）是一个设置的宽度，我们可以创建固定宽度的列来包含它们。现在div可以自由地达到所需的高度（根据它们包含的信息），只需在它们的父级
div.column中相互叠加。在
load页面上，我们测量可用的宽度（在一个实时版本中计算偏移量等），并计算水平放置的列数，然后创建这些列。为了节省读取和重新读取DOM的时间，我们可以将列存储到一个数组中，以便以后查找。创建列之后，我们可以自由地将动态创建的infodiv添加到列中，在列查找数组中循环，为每个新的infodiv使用每个渐进列（从左到右）。进入最后一列后，我们将查找计数器设置回零，然后继续加载infodiv。
该方法将在每个列中填充大约相等数量的信息子（依赖于数学）。但是没有检查每个infodiv的高度，因此任何列的内容都可能比其他列长得多。一种解决方法是在创建每个新infodiv时测量每个列的高度，然后将该infodiv添加到最短的列中。这将导致柱在高度上保持更接近相等。
注意：连接到这个答案的演示jsFiddle现在包含一个基本函数，在创建infodiv时动态测量列的高度。为了获得列高度的准确读数，每个图像都附加了一个临时的
onload侦听器，该侦听器触发下一个infodiv的创建。监听器一完成就被删除它的工作就是释放资源。这个方法减缓了整个页面的加载速度，但还不足以达到不切实际的效果。根据实际情况，更快、更不精确的加载可能更可取。在这种情况下，丢弃图像的onload侦听器，并根据需要创建infodiv，而不考虑先前创建的那些侦听器的状态。进一步的动态测量：添加一个
onscroll监听器可以改进大量数据和/或图像（特别是图像）的加载，该监听器触发一个函数来加载新数据（在本例中是infodiv），只有当访问者滚动到他们已经看到的内容的末尾时。这将有助于减少服务器压力和增加浏览器响应。另外：没有必要加载访问者可能永远不会滚动查看的内容。所以伪代码类似于：
屏幕有多宽？
使（屏幕宽度除以列宽）列成为列。
在创建新的infodiv时，将它们添加到列中。
不要将它们全部添加到一个列中，而是平等地共享它们。
最终的结果是动态地创建等宽、不同高度的信息div，并以列的方式进行布局。他们的自然倾向是尽可能高高在上，所以他们总是坐在他们上面的infodiv下面。
由于列的display属性设置为
inline，因此它们往往并排放置在有空间的地方。需要注意的是，如果列的父级宽度减小（在创建初始布局之后），最右边的列将被推到其同级列的下面。至于PHP-那是另一个故事：-）