在另一个砌体布局内具有砌体布局的 div答案

【问题标题】：div with masonry layout inside another masonry layout在另一个砌体布局内具有砌体布局的 div
【发布时间】：2014-10-11 08:19:26
【问题描述】：

我的问题是：我有一个带有砖石布局的容器，一个或多个项目是否可能在另一个带有砖石的容器内？

  <div class="masonry">
    <div class="item"></div>
    <div class="item">
      <div class="masonry_inside">
          <div class="item_inside"></div>
          <div class="item_inside"></div>
          <div class="item_inside"></div>
      </div>    
    </div>  
    <div class="item"></div>
 </div>

【问题讨论】：

我试试，但是第一个容器的项目有一个奇怪的底部边距。

标签： jquery-masonry masonry

【解决方案1】：

您必须在每个网格容器上分别初始化 Masonry：

// Init masonry on outer container
$('.masonry').masonry({
  itemSelector: '.item',
});

// Init masonry on inner container
$('.masonry_inside').masonry({
  // You need to use another item selector class on the inner elements
  itemSelector: '.item_inside',
});

.masonry {
  width: 440px;
  background-color: gray;
}

.item {
  width: 200px;
  background-color: black;
  margin: 10px;
}

.item_inside {
  width: 80px;
  margin: 10px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="masonry">
    <div class="item" style="height: 150px;"></div>
    <div class="item" style="height: 200px;"></div>
    <div class="item" style="height: 180px;"></div>
    <div class="item">
      <div class="masonry_inside">
          <div class="item_inside" style="height: 180px;"></div>
          <div class="item_inside" style="height: 80px;"></div>
          <div class="item_inside" style="height: 120px;"></div>
          <div class="item_inside" style="height: 35px;"></div>
      </div>    
    </div>  
    <div class="item" style="height: 80px;"></div>
 </div>

【讨论】：