如何在两列中浮动文章？

Question

我有这个问题。我正在建立一个社交网站，我必须在两列中创建帖子。父容器是一个部分，而“post”元素是其样式为float：left的文章。如何让我们滑到那些在较短的空间下创建的空白区域？

Answer 1

css还没有好的解决方案。这通常被称为砖石或pinterest布局。 使用jquery。

尝试... http://masonry.desandro.com/

或谷歌'砌体布局插件'

Answer 2

这个基本的JavaScript函数可能会有所帮助。它使用jQuery：

function structurePosts(holder){
$(holder).find('.post-item').each(function(){
        $(this).appendTo('.col-append');
        var nextColumn = $('.col-append').next('div');
        $('.col-append').removeClass('col-append');
        if(nextColumn.size()){
            nextColumn.addClass('col-append');
        } else {
            $('.post-col').first().addClass('col-append');
        }
    });
}

您可以这样称呼：

structurePosts('#container-with-posts');

它基本上只使用post-item类迭代每个包含的元素，并将它们放入类post-column

的列中

它需要一个HTML结构，如下所示：

<div class="posts-columns">
    <div class="post-col col-append"></div>
    <div class="post-col"></div>
    <div class="post-col"></div>
</div>
<div id="container-with-posts">
    <div class="post-item> <!-- Post content here --> </div>
    <div class="post-item> <!-- Post content here --> </div>
</div>

当然，您需要添加样式以适应，或修改标记和代码以匹配您的CSS。