div с расположением кладки внутри другой кладочной компоновки

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>