Каменная кладка с предметами полной ширины

Question

У меня проблема с масонством, где, если мне нужно, чтобы один элемент был на 100% шириной, а остальное - шириной 50%, макет больше не помещает мои элементы рядом друг с другом. Я бы хотел, чтобы элементы отображались бок о бок, как они делают, когда нет элемента 100% -width.

Вот JS скрипка: https://jsfiddle.net/ubmf47s4/2/

<div id="boxes" class="masonry clearfix"> 
    <div class="box box-fw" style="background: cyan;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: magenta;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: yellow;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: grey;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
</div> 

.box{ 
    width: 50%; 
    box-sizing:border-box; 
} 

.box-fw{ 
    width:100% 
} 

    $(function(){ 
    var container = $('#boxes'); 

    container.imagesLoaded(function(){ 
     //console.log("Images loaded!"); 
     container.masonry({ 
      itemSelector: '.box', 
      isAnimated: true 
     }); 
    }); 
}); 

Answer 1

Кладка требует columnWidth, чтобы определить ширину столбцов для того, чтобы выложить свой контент в, который может быть либо прямым значением пиксела или селектор для элемент для измерения. Поскольку columnWidth не указан в вашем коде, масонство по умолчанию измеряет первый элемент в вашем контейнере кладки, чтобы установить ширину столбца. Поскольку ваш первый элемент имеет ширину 100%, масонство измеряет его и устанавливает ширину столбца до 100%, поэтому ваши 50% -ные элементы больше не отображаются бок о бок (весь макет кладки фактически один столбец).

Подробнее об этом пользователе in the Masonry docs for columnWidth.

---

Один из способов исправить это указать элемент, что масонство можно измерить, чтобы установить вашу ширину столбца - в данном случае я использовал элемент с классом column-sizer, который я размером в 50%, используя CSS. Затем масонство измеряет этот элемент, чтобы определить размер столбца для макета. Я одолжил технику от David Desandro's fluid columnWidth CodePen example.

Скриншот Результат:

Рабочая Демо:

$(function() { 
 
    var container = $('#boxes'); 
 

 
    container.imagesLoaded(function() { 
 
    //console.log("Images loaded!"); 
 
    container.masonry({ 
 
     itemSelector: '.box', 
 
     columnWidth: '.column-sizer', 
 
     isAnimated: true 
 
    }); 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
} 
 
.box, 
 
.column-sizer { 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
} 
 
.box-fw { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://npmcdn.com/masonry-layout@4.0.0/dist/masonry.pkgd.min.js"></script> 
 
<script src="https://npmcdn.com/imagesloaded@4.1.0/imagesloaded.pkgd.min.js"></script> 
 

 
<div id="boxes" class="masonry clearfix"> 
 
    <div class="column-sizer"></div> 
 
    <div class="box box-fw" style="background: cyan;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: magenta;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: yellow;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: grey;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
</div>

JSFiddle Версия: https://jsfiddle.net/x9mf2c6x/