尝试对齐不同大小的div的位置,以便它们之间不会有任何空白

Question

请不要将我的问题视为重复.我只是没有成功尝试使用CSS显示不同大小的div

正如上面的帖子中所建议我使用了Masonry.但未能成功.我正在使用codeigniter.

这是我正在使用的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部分显示图像,名称,日期等

Answer 1

动态divs取而代之

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"容器或类似内容中).由于这些(我们称之为"infodivs")infodivs的宽度是设定宽度,我们可以创建固定宽度的列来包含它们.现在div可以自由地成为他们需要的任何高度(根据它们包含的信息),并且将简单地叠加在他们的父母之上div.column.

在页面上,load我们测量可用宽度(在实时版本中计算偏移等),并计算水平适合的列数,然后创建这些列.为了节省读取和重新读取DOM,我们可以将列存储到数组中以便以后轻松查找.

创建列后,我们可以自由地动态创建的infodivs添加到列,通过列查找阵列循环利用为每个新infodiv每一个逐行列(在屏幕左到右).一旦我们到达最后一列,我们将查找计数器设置回零,并继续加载infodivs.

该方法导致每列填充大约相等数量的信息div(取决于数学).但是,没有检查每个infodiv的高度,因此任何列最终可能会比其他列更长的内容.解决这个问题的方法是在创建每个新的infodiv时测量每列的高度,然后将该infodiv添加到最短的列中.这将导致列的高度保持更接近.

注意:连接到此答案的演示jsFiddle现在包含一个基本功能,可以在创建infodiv时动态测量列高度.为了准确读取列高,每个图像都onload附有一个临时监听器,触发创建下一个infodiv.一旦完成它的工作就会删除监听器以释放资源.此方法会减慢整个页面加载速度,但不足以使其不切实际.根据实际情况,可能更加需要更快,更准确的加载.在这种情况下,onload无论先前创建的状态如何,都会丢弃图像的侦听器并按需创建infodiv.

进一步动态测量:onscroll只有当访问者向着滚动时,通过添加一个触发功能来加载新数据(在这种情况下为infodiv)的侦听器,可以改善大量数据和/或图像(特别是图像)的加载.结束他们已经看到的.这将有助于减少服务器压力并增加浏览器响应.另外:没有必要加载访问者可能永远不会滚动查看的内容.

所以伪句中的代码是这样的:

How wide is the screen?
Make (screen-width divided by column-width) columns.
While we have new infodivs being created, add them to the columns.
Don't add them all to one column, but shared them out equally.

最终结果是动态创建的等宽信息div,但是以不同的高度,以列式方式布局.他们的自然倾向是尽可能地高于他们的父母,所以他们总是坐在他们上面的infodiv下面.

由于列的显示属性设置为inline,因此它们倾向于并排放置在有空间的位置.需要注意的是,如果列的父级宽度减小(在创建初始布局之后),则最右侧的列将被推到其同列之下.

至于PHP - 这是另一个故事:-)