Невозможно инициализировать Masonry с помощью JQuery

Согласно официальной документации, существуют разные способы инициализации контейнера masonry. Инициализация HTML работает нормально, но когда я пытаюсь переместить параметры из атрибута data-masonry в JQuery, все ломается.

Вот инициализация HTML с параметрами JSON.

<div id="container" class="masonry js-masonry"  data-masonry-options='{ "columnWidth": ".grid-sizer", "itemSelector": ".item", "isFitWidth": true }'>

И вот как это выглядит сейчас, когда я перемещаю их в свой файл js/JQuery:

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: '.grid-sizer',
  itemSelector: '.item',
  isFitWidth: true
});

При использовании последней версии элемент grid-sizer становится видимым, что, конечно же, не должно отображаться.

Я не вижу в официальной документации указаний о том, когда мне нужно вызывать код инициализации в JQuery. Это $(document).ready, где я могу вызвать это?

JSFIDDLE со сломанным макетом: http://jsfiddle.net/1f1kwfbd/10/


jquery masonry jquery-masonry
person imrek    schedule 21.02.2015    source источник
comment
Да, вы вызываете его в функции $(document).ready после загрузки страницы.   -  person Jackson    schedule 21.02.2015
comment
@Jackson К сожалению, у меня сломалась сетка каменной кладки. Я обновил свой вопрос и добавил файл jsfiddle.   -  person imrek    schedule 21.02.2015
comment
Вам нужно загрузить кладку как внешний ресурс в ваш jsfiddle! Используйте CDN. Это не сработает. без загрузки! Внутри вашего gird sizer не должно быть содержимого: <div class="grid-sizer"></div>, и у него должно быть собственное правило css, не связанное с вашим .item css, например: .grid-sizer { width: 33.33333%; }. Исправьте это в первую очередь.   -  person Macsupport    schedule 22.02.2015

Ответы (1)


arrow_upward
1
arrow_downward

Я не вижу в официальной документации указаний о том, когда мне нужно вызывать код инициализации в JQuery. Это $(document).ready, где я могу вызвать это?

Таким образом, вы можете вызывать это, когда захотите.

Самый быстрый способ действительно был бы на document.ready - это запустит его, как только страница загрузится, например

$( document ).ready(function() {
    var $container = $('#container');
    // initialize
    $container.masonry({
      columnWidth: '.grid-sizer',
      itemSelector: '.item',
      isFitWidth: true
    });
});

В качестве альтернативы вы можете инкапсулировать свой код каменной кладки в функцию и вызвать ее позже. например

// Declare your function
function initMasonry() {
    var $container = $('#container');
    // initialize
    $container.masonry({
      columnWidth: '.grid-sizer',
      itemSelector: '.item',
      isFitWidth: true
    });
}

Чтобы вызвать функцию, просто вызовите ее так:

initMasonry();

Обновить

После прочтения документации по каменной кладке вам нужно создать новый объект каменной кладки, а не инициализировать объект каменной кладки в селекторе jQuery.

Пример кода:

$(document).ready(function() {

    var container = document.querySelector('#container');
    var msnry = new Masonry( container, {
        columnWidth: '.grid-sizer',
        itemSelector: '.item',
        isFitWidth: true
    });

});

Обновленная скрипта: http://jsfiddle.net/pjbq4gj6/

Документы для справки: http://masonry.desandro.com/#javascript

person James    schedule 21.02.2015
comment
Точно такой же код, с которым я работаю в данный момент, но div .grid-sizer виден, и при изменении размера окна все перекрывается. См. мой jsfiddle: jsfiddle.net/1f1kwfbd/1 - person imrek; 21.02.2015
comment
Я не придумал этот элемент, он также используется в документации ДеСандро, например. этот codepen: codepen.io/desandro/pen/JFpeg CSS не скрывает этого. - person imrek; 21.02.2015
comment
@DrunkenMaster Я не вижу в вашей скрипке ничего, что запрещало бы отображение элемента grid-sizer. И каково назначение этого элемента? - person James; 21.02.2015
comment
@DrunkenMaster Итак, ваша кладка не сработает на вашей скрипке, потому что вы не ссылались на библиотеку. Вам нужно добавить внешний ресурс к вашей скрипке. Я добавил его через меню внешних ресурсов с левой стороны, и теперь кладка выполняется. Но, похоже, это еще не решило вашу проблему. jsfiddle.net/1f1kwfbd/9 - person James; 21.02.2015
comment
О, это правда, тем не менее, элемент .grid-sizer все еще отображается, если только я не использую инициализацию HTML. Вот обновленный jsfiddle: jsfiddle.net/1f1kwfbd/10 - person imrek; 21.02.2015
comment
@DrunkenMaster исправил вашу проблему - она ​​связана с тем, как вы называете метод каменной кладки. Смотрите мой обновленный ответ выше. - person James; 22.02.2015
comment
Хм, не исправлено, так как ваш размер сетки все еще отображается. См. мой комментарий выше о css для grid-sizer и посмотрите обновленную fiddle с проблемой grid-sizer исправлено. - person Macsupport; 22.02.2015
comment
@Macsupport Я тоже только что это заметил - хорошо замечено. Думаю, это должно решить все проблемы. Проголосовал :) - person James; 22.02.2015
comment
@Macsupport Спасибо всем, оказалось, что у меня есть другие проблемы, и Masonry может быть не лучшим вариантом для моего проекта. - person imrek; 22.02.2015