jQuery: объединение «фильтруемого портфолио» и макета масонства - PullRequest
Новая
       22

jQuery: объединение «фильтруемого портфолио» и макета масонства

1 голос
/ 17 февраля 2010

Я пытаюсь объединить «фильтруемый портфель» (http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/) с макетом масонства ... поэтому я хочу, чтобы мои предметы перенастраивались с помощью каменной кладки после того, как я их отфильтровал, но они остаются в положении, где кладка положить их ...

вот мой черновой набросок первого сайта: http://waynetest.kilu.de/lula/ (работа явно идет ..;))

Есть ли возможность объединить оба js-скрипта?

спасибо большое, Katharina

Ответы [ 3 ]

2 голосов
/ 19 июля 2011

Вы всегда можете попробовать http://isotope.metafizzy.co/

0 голосов
/ 01 февраля 2017

Сначала создайте скрытый div и поместите в него реальные данные. В этом примере мы называем это #hidden. Затем создайте пустой div для основного масонства. Мы называем это # ​​масонством. Итак, пока у нас есть что-то вроде этого: 

<div id="hidden"> ... CONTAINING THE ACTUAL DATA ... </div>
<div id="masonry"></div> <!-- which is a blank div -->

Элементы будут обнаружены по их data-rel, поэтому не забудьте все фильтры как относящиеся к элементам. Например: 

<div class="work" data-rel="Template Design">CONTENT</div>

В качестве фильтров создайте список, подобный этому: 

<ul id="port_filter">
    <li data-rel="all" class="active">All</li>
    <li data-rel="Graphic Design">Graphic Design</li>
    <li data-rel="Template Design">Template Design</li>
    <li data-rel="Programming">Programming</li>
</ul>

Теперь обработайте функции начального заполнения и фильтрации следующим образом: 

// Initial loading
var all = $('#hidden .work');
$('#masonry').html(all);
$('#masonry').masonry({
    itemSelector: '.work',
    columnWidth: 299
});

// Portfolio filtering
$('#port_filter li').click(function(){
    if($(this).hasClass('active')) {
        return;
    }
    else {
        $('#port_filter li').removeClass('active');
        var filter = $(this).attr('data-rel');
        $(this).addClass('active');
        if(filter == 'all') {
            $('#masonry').html(all);
            $('#masonry').masonry();
        }
        else {
            $('#masonry').html('').html(all);
            removed = null;
            var removed = $('#masonry .work[data-rel!="' + filter + '"]');
            removed.remove();
            $('#masonry').masonry();
        }
    }
});

Этот метод протестирован на Masonry v4 и является лучшим.

0 голосов
/ 14 мая 2010

Я хотел то же самое и, наконец, все заработало.

См .: http://jasondaydesign.com/masonry_demo/

Надеюсь, это работает для ваших нужд.

...