Расположение изотопов fitColumns приводит к тому, что контейнер опущен

См. http://jsfiddle.net/cUcFd/5/ - обратите внимание, что если вы измените layoutMode на «масонство» или «fitRows», он отлично работает. Но с «fitColumns» он просто пуст, и все блоки исчезают.Расположение изотопов fitColumns приводит к тому, что контейнер опущен

Кажется, существуют требования относительно того, какие стили установлены на контейнере и элементы, чтобы режим fitColumns работал, но я не могу найти никакой документации относительно того, что они представляют.

источник

2012-06-20 enn

OP, вы нашли решение еще? –

Почему это не работает

fitColumns является «горизонтальным расположением», поэтому он намерен уйти в сторону, а не вверх и вниз - по аналогии с игра с прокруткой. С учетом их конструкцией, горизонтальные макеты требуют атрибута высоты, как описано здесь: http://isotope.metafizzy.co/layout-modes.html#horizontal-layouts

статического решения

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

Вы хотите использовать masonry вместо fitColumns. Установка columnWidth позволит вам заполнить ширину контейнера и использовать как можно больше вертикального пространства. Например: http://jsfiddle.net/cUcFd/22/

$('#container').isotope({ 
    itemSelector : '.block', 
    // layoutMode: 'fitColumns', 
    layoutMode: 'masonry', 
    masonry: { 
     columnWidth: 100 
    } 
});

динамическое решение

Предполагая, что вы не знаете ширину ваших колонок и хотите найти его динамически, можно базировать его широчайший элемент в #container используя что-то вроде код приводится здесь: https://stackoverflow.com/a/8853777/1786459

Например: http://jsfiddle.net/cUcFd/24/

var column_width = Math.max.apply(null,$('#container .block').map(function(){return $(this).outerWidth(true);}).get());

Однако вам будет необходимо определить наиболее подходящий способ установки ширины столбца.

источник

2014-02-03 16:14:20

Как насчет того, хотите ли вы сохранить вертикальное упорядочение «fitcolumns», но иметь макет стиля «фиксированной ширины, но не фиксированной высоты» масонства. Или, говоря иначе, такой же макет, как и кладка, но порядок элементов выполняется сверху вниз, а не слева направо. –

Привет @PaulRedmond, вы нашли способ сделать это? Я искал то же самое решение моей проблемы: fitColumn сортирует мои объекты, как я хочу (сверху вниз, затем слева направо), но я не знаю высоты контейнера (только ширина). – frenetix

@frenetix Я не нашел решение, к сожалению, и пошел с макетным макетом в конце. –

Попробуйте установить ширину и высоту контейнера. Когда вы используете layoutMode:'fitColumns', он должен предоставить всем элементам свойство float, которое больше не заполняет контейнер.

Вы также можете установить resizesContainer:false

источник

2012-06-20 20:47:55 JJFizzle

Я уже установил ширину, как вы можете видеть. Установка высоты приведет к победе в цели того, что я пытаюсь сделать - я хочу заполнить ширину контейнера, но сколько угодно колонок, и я хочу, чтобы он занимал столько вертикального пространства, сколько ему нужно. – enn

Расположение изотопов fitColumns приводит к тому, что контейнер опущен

ответ

Смежные вопросы