Question

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

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

Answer 1

你必须在每个网格容器上分别初始化砌体：

// 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>

div与另一个砌体布局内的砌体布局

1 个答案: