jQuery Masonry - неправильно организованные элементы

После изменения формата моего существующего отчета я заметил, что после фильтрации одного из элементов кладка запускается неправильно. Пример ниже:

http://relevantcodes.com/Tools/ReportUnit/res.html

Обратите внимание, что «Фильтры фильтров -> Пройдено» работает неправильно, но все остальные фильтры работают. Когда выбрано «Пройдено» для «Фильтровать приборы», элементы располагаются вертикально, а не в предопределенной сетке. Все остальные фильтры работают корректно, то есть переставляются как по горизонтали, так и по вертикали.

Я пробовал все, но ничего не работает, и это действительно странная проблема.


jquery masonry jquery-masonry
person Anshoo    schedule 22.05.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Из документации по кладке:

1. If set to an Element or Selector String, Masonry will use the width of that element.
2. If columnWidth is not set, Masonry will use the outer width of the first element.

Я просто вставил элемент размера в контейнер каменной кладки вот так, и он работает.

<div class='container masonry'>
    <div class='sizer'>..</div>
    <div class='item'>..</div>
    <div class='item'>..</div>
</div>

.sizer { width: 49%; } // default

И мой адаптивный код имеет другую ширину, которую я использую для установки размера.

person Anshoo    schedule 23.05.2015
comment
Рад, что это сработало; на самом деле это основная причина моего ответа, но все оказалось намного проще. - person Lawrence Johnson; 26.05.2015

arrow_upward
1
arrow_downward

У вас много javascript, и дисплей выглядит очень хорошо, но есть одна важная вещь, которую я почти гарантирую, это ваша проблема. Мне нужно воспроизвести и проверить немного кода, но я настоятельно рекомендую следующее:

В вашем подходе к каменной кладке используется фильтр отображения/скрытия, который сам по себе анимирован. Проблема заключается в том, что masonry сразу же вычисляет, куда поместить вещи, но у показа/скрытия есть анимация, которая занимает некоторое время. То, что у вас осталось, — это основанный на удаче подход к кладке, зная, каким будет результирующий дисплей. Вот несколько вариантов, которые я бы рассмотрел:

  1. Переключитесь с кирпичной кладки на изотопную. Это тот же базовый движок, но он имеет встроенную фильтрацию, которая полностью устраняет эту сложность из проблемы.
  2. Отложите настройку каменной кладки до тех пор, пока не завершится показ/скрытие (я полагаю, что по умолчанию это 0,5 секунды).
  3. Используйте заполнитель div для каждого элемента. Это забавно, но идея в том, что вы помещаете контейнер вокруг своих элементов, который будет показывать/скрывать, который занимает заполнитель для ширины/высоты элемента. Вы прикрепляете div-заполнитель к каменной кладке, поэтому, когда вы показываете/скрываете свой внутренний элемент, каменная кладка все еще понимает, каким он должен быть. Он невидим для пользователя, поэтому он не имеет заметной разницы.

Короче говоря, я думаю, что № 1 - лучший подход. Это сэкономило бы вам значительное количество времени при разработке, если бы вы использовали его для фильтрации. # 2 - это своего рода хак, который может, по крайней мере, позволить вам проверить, связана ли проблема с тем, что я ответил. № 3 — полезная информация, если у вас есть сетка с элементами, которые меняют размер по мере того, как пользователь взаимодействует с ними.

Надеюсь, это поможет.

person Lawrence Johnson    schedule 22.05.2015
comment
В качестве побочного комментария, совершенно не связанного с вашим вопросом, но, возможно, некоторая полезная информация заключается в том, что вы можете рассмотреть возможность избежать использования return;. Во-первых, это недопустимый javascript (вы можете вернуть false;), но я бы особенно избегал сценариев, в которых вы используете его для выхода из функции. Опять же, без критики, но стоило бы подумать об использовании if/else, а не if/return. - person Lawrence Johnson; 23.05.2015
comment
Спасибо, Лоуренс. № 1 не может быть и речи из-за лицензии на изотоп. Пробовал №2, не помогло. Я попробую № 3, как вы упомянули. Что странно, все остальные фильтры работают отлично, кроме этого. Также спасибо за указание на ошибки с оператором return, я их все исправил. - person Anshoo; 23.05.2015
comment
Кстати, лицензия на изотоп стоит всего 25 долларов за коммерческую лицензию, бесплатную для личного использования по GPLv3. Кажется довольно разумным. - person Macsupport; 23.05.2015