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

Question

В соответствии с official documentation существуют различные способы инициализации контейнера для кладки. Инициализация 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 
}); 

Использование последней версии, элемент сетки Сайзер идет видимым, который должен не появляется, конечно.

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

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

Answer 1

Я не вижу никакой спецификации в официальной документации о том, когда мне нужно назвать код инициализации в 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(); 

Update

После прочтения документации для кладки, вам необходимо создать новый объект каменной кладки, в отличие от Запустите объект кладки в селекторе 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