Добавленные результаты jQuery masonry отображаются только в одном столбце

Когда я использую метод добавления каменной кладки, все добавленные элементы имеют атрибут "left", рассчитанный как "0", в результате чего все элементы отображаются в одном столбце. выполнение каменной кладки («перезагрузка») переставляет все правильно, но делать это каждый раз, когда загружается новый элемент, будет пожиратель ресурсов.

Кроме того, он анимируется сверху, хотя должен делать это снизу.

Мой код выглядит следующим образом:

Изначально:

$('.pinboard-list').masonry({
    itemSelector : '.grid-item'
});

Затем для каждого элемента

function renderitems(){
    boxes = $(html);
    $('.pinboard-list').append(boxes).masonry('appended',boxes,true);
}

Я упускаю что-то очевидное?

Редактировать

JS-скрипт

http://jsfiddle.net/LTFG8/1/


person Matthew Dolman    schedule 19.09.2012    source источник
comment
Что находится в $(html) ? Я бы рекомендовал настроить ваш код в jsfiddle, чтобы упростить нам отладку (а также убедиться, что код отделен от остальной части приложения).   -  person Anders Arpi    schedule 19.09.2012
comment
html — это строка html-кода, которую я хочу добавить. Он заключен в $(), чтобы сделать его объектом jQuery, который требуется для параметра $content добавленного метода.   -  person Matthew Dolman    schedule 19.09.2012
comment
Да, мне интересно, что такое настоящий HTML-код. :)   -  person Anders Arpi    schedule 19.09.2012
comment
Я добавил ссылку jsfiddle на вопрос   -  person Matthew Dolman    schedule 20.09.2012


Ответы (2)


Вам нужно использовать метод imagesLoaded, как показано в документации - Masonry (и Isotope, если на то пошло) нуждается в ширине и высоте недавно добавленных, добавленных или вставленных изображений для правильного расположения, перезапуска с обратным вызовом. На SO есть много похожих вопросов и ответов, показывающих, как это сделать. Посмотрите демонстрацию с инструментами разработчика Chrome.

person Systembolaget    schedule 19.09.2012
comment
Я исправил ширину и высоту изображений в CSS... нужно ли это? - person Matthew Dolman; 19.09.2012
comment
Вам нужно указать ширину и высоту в вашем HTML, будь то жестко закодированный или созданный во время выполнения. С помощью CSS вы можете стилизовать только изображение или любой загружаемый элемент. - person Systembolaget; 19.09.2012
comment
Жесткое кодирование HTML-атрибутов высоты и ширины в элементе .grid-item по-прежнему не устраняет проблему. - person Matthew Dolman; 20.09.2012
comment
Вы заполняете свой #container кирпичами .masonry очень необычным способом, добавляя элементы в пустой контейнер; если вы жестко кодируете размеры изображения в html (чего вы не делали в своей скрипке и, конечно, не хотите делать для динамической загрузки, а затем добавляли) или вы используете обратный вызов imagesLoaded и Masonry, как показано в документации, он делает работай. Возможно, см. обратный вызов stackoverflow.com/a/10708377 или повторно посетите jsfiddle.net/desandro/RXDL4 и jsfiddle.net/ LTFG8/1 - person Systembolaget; 20.09.2012
comment
Возможно, я ошибаюсь, но я хочу иметь возможность очищать содержимое контейнера и перезагружать элементы на основе ввода пользователя. Конечно, я бы начал с пустого контейнера, чтобы выполнить это? Жесткое кодирование ширины и высоты изображения по-прежнему не исправляет это в этом jsfiddle.net/LTFG8/2 Предоставленная вами скрипка не использует добавленный метод. У меня нет проблем, если я использую перезагрузку. - person Matthew Dolman; 20.09.2012

Спасибо @Systembolaget за подсказку. В контейнере уже должно быть что-то, чтобы добавленный метод работал. Добавление чего-то вроде этого исправило это:

<li class="grid-item">&nbsp;</li>

Исправляет это

person Matthew Dolman    schedule 20.09.2012
comment
Просто из интереса - почему вы загружаете элементы неупорядоченным списком, а не обычным способом? В смысле - вы, очевидно, видите, что это выгодно? Причина: я никогда не реализовывал Masonry или Isotope таким образом, но, возможно, в некоторых ситуациях это хорошая идея... - person Systembolaget; 20.09.2012
comment
Есть некоторый javascript, который используется в другом месте на сайте, который полагается на селекторы ul li, и вместо того, чтобы переписывать сценарий, проще адаптировать мою страницу, чтобы она соответствовала сценарию... в любом случае спасибо за вашу помощь. - person Matthew Dolman; 20.09.2012