Jquery Isotope: как заполнить пустые пробелы?

Я пробовал в основном каждый намек / совет / совет, чтобы добиться этого, но, тем не менее, я получил эти пустые уродливые пробелы при использовании Isotope.

Вот демонстрация проблемы, с которой я столкнулся.

Вы видите эти пробелы? Есть ли какой-нибудь код jquery, чтобы нижние элементы заполняли эти пробелы всякий раз, когда они есть?

ЕСЛИ мы используем единую ширину для всех элементов, проблема вообще не проявляется. Он начинает появляться при использовании разной ширины для каждого элемента. Isotope недостаточно умен, чтобы искать пустые промежутки и заполнять их, если доступен какой-либо предмет подходящего размера.

Любая помощь? Я действительно застрял!

Дополнительный вопрос, который может помочь решить эту проблему:

Есть ли какой-нибудь плагин jQuery, который заставляет элементы плавать? Я считаю, что это может заставить подходящие предметы заполнить пустые места!


jquery jquery-isotope
person Adame Doe    schedule 24.08.2012    source источник
comment
Я думаю, вам нужно будет написать какой-нибудь javascript и исправить их вручную.   -  person Rocky Pulley    schedule 25.08.2012
comment
Я не программист :~) Я использую только то, что есть :~D так что писать что-то с нуля для меня не вариант!   -  person Adame Doe    schedule 25.08.2012

Ответы (2)


arrow_upward
23
arrow_downward

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

Эта функция была запрошена и другими:

Короче говоря, текущий ответ, похоже, заключается в том, что если вы хотите вообще избежать пробелов, вам следует:

  1. Выберите фиксированную ширину
  2. Аккуратно расположите элементы в соответствии с их размерами, чтобы при выбранной ширине не было зазоров.

Конечно, если ваши элементы не являются статичными по размеру и местоположению или если вы не можете установить ширину, я не думаю, что это сработает слишком хорошо.

Если ручное размещение элементов для заполнения промежутков в контейнере с фиксированной шириной не сработает для вас, я бы порекомендовал добавить +1 к первой ссылке.

E (22.04.2013): Я заметил недавнюю активность, так что быстрое обновление. Все это есть в выпуске masonry #141, первая ссылка:

PerfectMasonry — это расширение макета для Isotope. Он заполняет пробелы, предоставляя «идеальный Masonry» layoutMode и параметры, которые обеспечивают макет без пробелов.

Nested — это альтернативная библиотека для макетов без пробелов.

Packery — это библиотека от создателя Isotope, которая поддерживает макеты без пробелов и многое другое.

Я лично не использовал ни один из них (пока).

Наконец, в своем сообщении в блоге о выпуске Packery ДеСандро заявляет: "В конце концов, я хотели бы перенести это и другие решения, разработанные в Packery, на Masonry и Isotope».

Я бы не стал рассчитывать на то, что это произойдет невероятно скоро. Packery был выпущен всего 7 дней с момента этого редактирования.

E2 (6.13.2014):

DeSandro выпустил режим макета упаковки для изотопов.

person cjc343    schedule 24.08.2012
comment
Спасибо за ответ. Хотя, это не решает проблему. Я уже проверил приведенные выше ссылки на странице плагина Github, и пока безуспешно. Я надеялся, что кто-нибудь найдет ручное решение :~), так как создатель плагина ничего не сделает, если он не будет широко востребован. - person Adame Doe; 25.08.2012
comment
Я знаю, что это не решает проблему, но представляет собой единственный доступный в настоящее время вариант без реализации нового режима макета или ожидания того, что desandro (или кто-то еще) реализует его. - person cjc343; 25.08.2012
comment
Да! Спасибо за ваш вклад :~) - person Adame Doe; 25.08.2012
comment
С августа 2012 года произошло много событий, поэтому я обновил некоторые из последних сведений из выпуска № 141 по кладке. Если вы продолжаете использовать Isotope, вас, вероятно, больше всего заинтересует PerfectMasonry, поскольку он предоставляет решение на месте посредством изменения параметров. - person cjc343; 22.04.2013
comment
PerfectMasonry сделал это за меня. - person Adame Doe; 22.04.2013
comment
Я пробовал PerfectMasonry и Packery. Они оба работали хорошо, но для абсолютно нулевых пробелов подходил Packery. - person Alex Kendrick; 08.05.2013

arrow_upward
1
arrow_downward

Я попытался объяснить, почему это в этом дублирующемся потоке, который также включает в себя скрипку, с которой можно поиграть. Это не обязательно фиксированная ширина, если у вас много мелких предметов, как в оригинальной демонстрации, вероятность плотного прилегания высока, но не гарантируется. Вы можете использовать альтернативный плагин, такой как jQuery Tiles, или попробовать адаптировать Wookmarks.

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

person Systembolaget    schedule 25.08.2012
comment
Я не должен быть таким сложным :~) Я имею в виду, что в демо, которое я разместил, элементы имеют логически увеличивающийся размер. У них есть базовый размер, который можно умножить, чтобы он соответствовал нескольким столбцам или/и строкам. В моем воображении нам нужен плагин, который просто заставляет плавающие элементы заполнять пустые места. Выглядит и звучит просто :~D, но я не знаю, почему никто не смог этого добиться! - person Adame Doe; 26.08.2012
comment
Я пробовал Wookmarks. Он не поддерживает различную ширину. Создатель этого плагина говорит, что он поддерживает только один набор ширины, который соответствует его потребностям... Поэтому он не будет расширять его для поддержки нескольких элементов ширины. - person Adame Doe; 26.08.2012
comment
jQuery Tiles выглядит старым и давно не обновлялся... Я не смог найти ни одной последовательной демонстрации... Так что я отказался от нее. Но спасибо за подсказки :~) - person Adame Doe; 26.08.2012
comment
См. metafizzy.co/blog/mythical-drag-drop- multi-column-grid-plugin, почему даже это не так просто, как кажется. Но, в любом случае, алгоритмы bin-packing не являются ни черной магией, ни ракетостроением, но для их реализации здесь требуется некоторый уровень кодирования, насколько я понимаю вашу предполагаемую функциональность. Вы можете начать поиск реализаций Java или обработки, или найти какой-нибудь код MATLAB и посмотреть, сможете ли вы его адаптировать. Затем вы можете выпустить какой-нибудь хороший плагин, шаблоны WP — и набрать славу :) - person Systembolaget; 26.08.2012