Невозможно достичь желаемого эффекта с макетом Masonry

Я действительно в тупике здесь. Поскольку это вопрос о макете , вам нужно взглянуть на мой пример codepen.

в основном, если вы видите во втором ряду, между двумя блоками есть гигантское пространство. Почему? Почему не выстраивается?

Это варианты кладки:

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

Кроме того, поиграйте с шириной третьего элемента сетки. В идеале я хочу, чтобы это было 50%, и все мои элементы div помещались в пространстве, плотно упакованы. Причина, по которой у меня есть пользовательская ширина, заключается в том, что 40% - это максимальная ширина, прежде чем она переместит ее в следующую строку. ЗАЧЕМ? Он должен быть в том же ряду. 50% + 50% = 100%, значит есть место. Как вы думаете, почему он сломался?

1) Плагин JQuery https://github.com/desandro/masonry


javascript jquery css masonry jquery-masonry
person egucciar    schedule 05.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Пространство есть, потому что ширина столбца составляет 20%, но первый элемент равен 50%. элемент 50% округляется до 60%. Так что есть 10% дополнительного места.

Но если вы измените .grid-sizer { width: 10%; } это позволит измерять 50%-й элемент на уровне 50%.

person egucciar    schedule 06.07.2016