Что не так c мозаикой на сайте?

Question

[Гриша Никольский]

Привет. Для отображения постов в блоге использую BootStrap и Masonry: justme.matdev.ru/blog-grid-full.html Последний сильно шалит при работе ввиду, видимо, каких-то недочетов с моей стороны. При ширине девайса в 1000px можно заметить даже правильную работу в верхней части блога. Однако почему-то кнопки (которые виднеются на заднем фоне в виде темных квадратов) слезли, хотя должны быть под постами, да и сама мозаика не работает так, как ожидается.
А ожидается что-то вроде этого:


Помогите исправить, пожалуйста. Заранее спасибо!

Answer 1

[Антон Мудренок]

Ку
Я чуток глянул, не могу сказать наверняка, но похоже в начале идет вычисление сетки, а потом происходит изменение контента ячеек. Этот центральный элемент "хавается" сеткой до определенного момента, а потом ты его динамически заполняешь и он портит всю малину.
Если его удалить, а потом начать играться с сеткой — все ок.

Comments

[Гриша Никольский]

Спасибо за уделенное время. Только я не понял, о каком центральном элементе идет речь?

[Антон Мудренок]

Гриша Никольский: item slider-post col-lg-3 col-md-6

[Антон Мудренок]

Гриша Никольский: так сайт выглядит без него i.piccy.info/i9/9774acd379ac325e133a7c8cdcd7ae61/1...

[Гриша Никольский]

Антон Мудренок: К сожалению, удалять его нельзя. На странице должно быть 8 постов.

[Гриша Никольский]

Антон Мудренок: Как вы считаете, тут дело в BootStrap или нет? По этой теме у них есть на сайте секция ( masonry.desandro.com/extras.html ) и CodePen ( codepen.io/desandro/pen/eJJEXd ). Вроде все сделал так же, но результата 0

[Гриша Никольский]

Антон Мудренок: Методом тыка было установлено, что дело в слайдере: ( justme.matdev.ru/blog-grid-full.html ). А почему - совершенно не ясно.

[Антон Мудренок]

Гриша Никольский: что значит нельзя удалить?) дело в самом элементе, он отличается от других минимум тем, что он ломает сетку, а максимум в нем вы пытаетесь запихнуть какой-то слайдер или чо... Его надо поправить, а сама сетка в порядке.
По поводу кнопок 1 2 3, вы их позиционируете блочным элементом, а сам Masonry(хоть я им и не пользовался никогда) шьет ваш элемент с position: absolute; таким образом он выпадает из контекста блочных элементов и эти кнопки отображаются как будто на странице никаких плиток нет. Тут надо двигать ваши кнопки на высоту блока с вашими плитками, а clearfix-ы можете просто нафиг убрать.

[Антон Мудренок]

Гриша Никольский: возможно получится все поправить если инициализировать в коде слайдер до того, как сетка начинает распихивать все элементы по местам. Похоже сам masonry видит тот элемент с размерами 0, 0. А после расчета сетки, вы этот размер меняете и происходит такая грязь

[Гриша Никольский]

Антон Мудренок: слайдер у меня объявляется в JS коде раньше, чем мазаика. Относительно кнопок понял. Если внутри поста нет слайдера, а тупо картинка или видео, то никакой грязи не получается и все работает, как по часам. Я об этом.

[Антон Мудренок]

Гриша Никольский: я тоже об этом говорю, с первого сообщения) Этот слайдер что-то ломает очевидно. Понять почему и как можно только если дебажить ваш JS код.
Основную идею я сказал — размеры элемента должны быть вычислены До того, как сетка начинает высчитывать расстояния, и не меняться после. Или меняться, но повторно вызывая пересчет сетки. Тогда проблем не будет.

[Гриша Никольский]

Антон Мудренок: Понял, спасибо, буду разбираться.