JQuery Кладка макет жидкости с изображениями

Question

Я инициируют Кладка как это:

container.imagesLoaded(function() { 
     container.masonry({ 
      itemSelector: '.my-brick', 
      columnWidth: function (containerWidth) { 
       return (containerWidth - 80)/4; 
      } 
     }); 
}); 

Проблема состоит в том, что .my-brick содержит изображения, которые шире, то, что должно быть вычислено ColumnWidth. Я бы предположил, что скрипт устанавливает свойство CSS элемента width в значение columnWidth, но это не так, чтобы столбцы были такими же широкими, как картинки.

Является ли это ожидаемым поведением?

Answer 1

Да, это так. вы должны установить ширину .my-brick с помощью CSS.

Рекомендуется использовать решетчатую систему.

Опция columnWidth существует, чтобы установить динамическую ширину столбца, если в вашем макете есть элементы элементов с шириной нескольких столбцов, а по столбцу - абсолютные позиции, которые элемент задан в DOM. Он использует columnWidth для определения расстояния между элементами. Если columnWidth не установлен, то он примет размер первого элемента