Javascript 砖石布局的css对齐

我曾尝试创建一个砖石网格，但我遇到的问题是，较长的单元与其他单元重叠，并且出于某种原因，massy.js根本无法填充与内容高度相关的区域

所以我想我可以通过使用

：n个child

选择器手动完成

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

这是我到目前为止得到的，

我想让各层不相互重叠，并自动填充间隙

以下是我正在使用的代码：

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;
}

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

html:

*, *: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;
}

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

有人能帮我吗

这里是我用于功能的js脚本

请注意，我使用jscroll.js创建无限滚动效果，并在插件的回调函数中加载massy.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%'
   });
 }
}); });

/*无限滚动*/
jQuery（文档）.ready（函数（）{
jQuery（'.board_content'）.jscroll({
正在加载TML:“”，
填充：0，
contentSelector:“.board_list”，
自动触发至：30，
下一个选择器：'.next_按钮'，
回调：函数（）{
jQuery（'.list_container'）.mashine({
//选择权
itemSelector:“.list_容器”，
列宽：50
});
jQuery（'.list_one'）。航路点（函数（）{
jQuery（'.list_one'）.addClass（'animated fadeIn'）；
}, {
抵销：“75%”
});
}
}); });

我检查了元素，发现每个元素都有

高度：0px

这就是问题所在，您需要做的是延迟Massy库调用，直到屏幕上显示的每个元素都显示出来，然后运行Massy以获得正确的效果

您可以发布JSFIDLE吗？这将更容易检测到故障error@KhaledAl-安萨里谢谢你的帮助。我担心它不会产生同样的错误，因为所有的内容和图片都来自我使用的CMS。你不能仅仅通过查看我引用的站点就发现错误吗？不知何故，这些项目

.list\u container

获得

高度：0px

。您需要检查谁执行此操作，以及为什么高度为0。我认为这是因为当脚本运行时，项目不可见，因此脚本发现他的高度为

0

。（）仅在显示所有项目后才尝试运行脚本，并告诉我结果。@我认为每个.list_容器上的高度：0来自于massy.js。但是，即使它没有这样做，massy.js也没有做任何有助于布局成为massy布局的事情。至少，如果我的高度是0，那么里面的东西就可以放进这个空的空间。你为什么要用砖石呢？你可以使用css的新功能，比如col（），你可以查看原始帖子吗？我刚刚添加了js脚本。你能再次访问这个网站吗？我刚刚删除了massy.js，这就是没有massy.js的情况。你能告诉我怎么做吗？jscroll有什么用@MarkKangi刚刚摆脱了无限滚动，只是想看看没有它时的效果。在加载窗口

$（window.load）后尝试添加砖石代码（function（）{/*您的代码在这里*/}

如果想要更好的加载，请使用库。我尝试过用您提供的代码包装脚本，但没有任何效果。我尝试过使用，但抛出了“imagesLoaded不是函数”错误。