css 砌体布局的对齐方式

Question

我已经尝试 masonry.js 来创建砌体网格，但我遇到的问题是较长的单元会与其他单元重叠，而 masonry.js 出于某种原因，不会'完全不填充与内容高度相关的区域。

所以我想我可以使用 :nth-child 选择器手动完成。

我想让它看起来更像这样：

这是我到目前为止得到的， http://lifeto.cafe24.com/xe/request

我想让图层之间不重叠并自动填充间隙。

这是我使用的代码：

css:

*, *:before, *:after {
   box-sizing: border-box !important;
}

 article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: flex-start;
}

.board_list {
   display: block;
}

.list_container {
   height: auto;
   margin: 0 20px 100px;
   padding: 0;
   width: 200px;
   display: inline-block;
}

.list_profile_img_container {
   /* border-bottom: 1px solid #ccc; */
   margin: 0;
   padding: 0;
}

.list_profile_image {
   border-radius: 100px;
   width: 30px;
   height: 30px;
}

.list_image_thumbnail {
   width: 100%;
   height:100%;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

.list_one {
   opacity: 0;
   background: rgba(255,255,255,0.8);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
   border-radius: 3px;
}

html:

<article>
   <!-- LIST -->
   <div class="list_container">
      <div class="list_one">
      </div>
   </div>
</article>

谁能帮帮我？

P.S。这是我用于该功能的 js 脚本。

并注意我使用 jscroll.js 来创建无限滚动效果，并在插件的回调函数中加载 masonry.js。

/* infinite scroll */
jQuery(document).ready(function(){
jQuery('.board_content').jscroll({
    loadingHtml: '<div class="loading_div"><center><img     src="layouts/wb10/ajax-loader4.gif" alt="Loading" /></center></div>',
   padding: 0,
    contentSelector: '.board_list',
    autoTriggerUntil: 30,
    nextSelector:'.next_button',
    callback: function() {

        jQuery('.list_container').masonry({
  // options
  itemSelector: '.list_container',
  columnWidth: 50
});

       jQuery('.list_one').waypoint(function() {
        jQuery('.list_one').addClass('animated fadeIn');
        }, {
         offset: '75%'
   });
 }
}); });

Answer 1

我检查了元素，发现每个元素都有 height: 0px;，这就是问题所在，您需要做的是延迟砌体库调用，直到每个元素都显示在屏幕上然后运行获得正确效果的砌体

css 砌体布局的对齐方式

css alignment for masonry layout

javascript

jquery

html

css

jquery-masonry