javascript - 尝试对齐大小不同的div的位置，以使它们之间没有任何空格

Question

请不要认为我的问题是重复的。我只是没能成功地尝试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>

我在分区中显示图像、名称、日期等

Answer 1

动态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-那是另一个故事：-）