Переразмечать элементы с изотопом, кажется, не поддерживает структуру - PullRequest
Новая
       2

Переразмечать элементы с изотопом, кажется, не поддерживает структуру

3 голосов
/ 24 февраля 2011

Я немного поигрался с изотопом http://isotope.metafizzy.co/demos/relayout.html и пытались создать родительский контейнер, который остается фиксированного размера, всегда с 6 меньшими предметами и перетасовкой, чтобы соответствовать седьмому большему предмету.

Вот то, что я имею до сих пор на jsfiddle http://jsfiddle.net/pedalpete/LGBg6/

Я надеялся, что после нажатия на любой блок общее число меньших блоков в одной строке будет равно 3.

По какой-то причине, либо пользователь .isotope ('resize'), либо воссоздающий и воссоздающий изотоп, как я делаю, я получаю число больше 3 в верхнем ряду, поэтому элементы не сортируются равномерно ,

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

1 Ответ

18 голосов
/ 24 февраля 2011

См. http://jsfiddle.net/desandro/S5vAG/ для моего решения.

Есть ли способ заставить изотоп подчиняться параметрам ширины и высоты рамки переплета ??

Первый шаг - отключить изотопное изменение размеров контейнера.Установите параметр resizesContainer false.

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

Я также использовал другой LayoutMode, fitColumns, который, я думаю, лучше подходит для вашей цели.Используя параметр getSortData, логика заключается в том, что если элемент имеет класс large AND - четный элемент, то он возвращается в следующий столбец.Таким образом, 2, 4, 6 все помещаются в следующий столбец, когда они большие. 

getSortData : {
  fitOrder : function( $item ) {
    var order,
        index = $item.index();

    if ( $item.hasClass('large') && index % 2 ) {
      order = index + 1.5;
    } else {
      order = index;
    }
    return order;
  }
},
...