jQuery, кладка масонства?

Question

Я немного помог с моим сайтом: http://www.lovejungle.com/dev/testenvironment/?cat=5

У меня сложилось впечатление, что jQuery Masonry плотно сложил объекты - по какой-то причине, когда я рандомизирую блокировку div, я получаю большие открытые пространства между ними?

Кто-нибудь может понять, почему это происходит?

По сути, я хочу создать сайт, похожий на этот: http://www.jwt.com/

Дайте мне знать, если вам нужен код или дополнительная информация, и я отвечу быстро!

Ура! * * 1013

Michael

Answer 1

Цитирование с сайта jQuery Masonry :

Думайте об этом как об обратной стороне CSS-плавающих элементов.Принимая во внимание, что плавающее расположение элементов по горизонтали, а затем по вертикали, Masonry размещает элементы по вертикали, а затем по горизонтали в соответствии с сеткой.

Так что, в принципе, ваши элементы будут хорошо вписываться, только если ширина всех вашихэлементы остаются неизменными.Точно так же, как float будет хорошо вписываться, если высота всех элементов одинакова.Вы можете наблюдать этот эффект на сайте, который вы упомянули: http://www.jwt.com/, где все элементы в стопке имеют одинаковую ширину.:)

HTH.

---

РЕДАКТИРОВАТЬ: Это также означает, что ваши элементы могут иметь ширину, кратную другим элементам в сетке.У вас может быть большой элемент, который в 3 раза больше обычного элемента.

Answer 2

Я должен сказать, что я не совсем знаком с тем, как работает Masonary внутри, но есть две вещи, которые я заметил на вашем сайте, которые могут помочь с этой проблемой:

1. Я заметил, что ваши столбцы пронумерованы как col2 - col4.В вашем javascript вы указываете, что ваш атрибут columnWidth равен 200px, что означает, что ширина каждого из столбцов кратна 200. Я не уверен, предполагает ли источник, что col1 будет 200, col2 будет 400 и т. Д.Поэтому, возможно, попробуйте нумерацию столбцов, чтобы они начинались с col1, а не col2.

2. Я заметил, что ваши столбцы имеют ширину не 200 пикселей или не кратны.Вам нужно, чтобы поля + отступ + ширина были равны 200. Из вашего CSS кажется, что это не так, как видно из следующего примера:

Col2:

width = 170px отступ на box = 10px вы добавляете поле в js = 10px

Это дает вам

170 + 10 + 10 + 10 + 10 = 210px

То же самое верно и для других столбцов.

Я не говорю, что исправление двух выше устранит проблему, с которой вы столкнулись, но попробовать стоит.