Кладка не укладывается правильно

Question

Кладка не укладывается правильно

0

Я использую masonry.js для достижения эффекта каменной кладки на моем сайте. Однако у меня возникают трудности с тем, чтобы изображения были собраны в нужные места, чтобы иметь бесщеточный макет. Я убедился, что все изображения обрезаны до нужных размеров, поэтому они будут идеально вписываться, но я все еще получаю пробелы. Любая помощь будет замечательной! Спасибо огромное!

Здесь ссылка на сайт: http://zechnelson.com/missionsme

znels 04 дек. 2013, в 20:50

Источник

Теги:

javascript

jquery

layout

jquery-masonry

2 ответа

Ещё вопросы

Souvik Banerjee · Answer 1 · 2013-12-04T17-40-00.000Z

Вы пропустили инициализацию масонства?

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

-------------------------- ИЛИ ----------------------- ---

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, itemSelector": ".item" }'></div>

Я видел источник и не смог найти ни один из вышеуказанного синтаксиса. Вы решили проблему по-другому?
Я только добавил это, но это все еще не имеет эффекта на это. Я работал с некоторыми другими изображениями, которые были не так много разных размеров, просто 400 на 600 пикселей и с половиной этого размера тоже.
Между двумя кодами есть "ИЛИ", вы вставили оба на страницу! Вы новичок ??? Также вы используете структуру UL> LI, в то время как документация указывает использовать макет на основе div, как показано ниже. <div id = "container"> <div class = "item"> ... </ div> <div class = "item"> ... </ div> <div class = "item"> ... < / div> ... </ div>
Вы также не используете класс «.item», поэтому вы хотите сделать itemSelector:'li' вместо itemSelector:'.item' - теперь вы увидите, что он работает.

Souvik Banerjee · Answer 2 · 2013-12-05T15-50-00.000Z

Существует "OR" между двумя кодами, вы вставили оба на страницу! Вы новичок?

Также вы используете структуру UL> LI, тогда как документация дает указание использовать макет div, как показано ниже.

<div id="container">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>

Также добавьте класс "item" в свои таблицы стилей, как показано ниже:

.item { width: 25%; }

См. POC по адресу: http://jsfiddle.net/souviiik/GkTL6/