Можно ли изменить положение кирпичей jQuery Masonry при использовании jQuery Quicksearch?

Я показываю результаты в стиле jQuery Masonry (http://masonry.desandro.com/) вместе с jQuery Quicksearch. (https://github.com/DeuxHuitHuit/quicksearch).
Когда я выполняю поиск, несоответствующие "кирпичи" удаляются/скрываются - и это правильно. Но остальные совпадающие «кирпичики» разбросаны по всей странице, потому что они заблокированы в определенном положении.

Я знаю, что Masonry может перемещать «кирпичики» при изменении ширины окна браузера, поэтому моей первой идеей было просто сделать +1px и -1px, чтобы вызвать этот эффект, добавив что-то в Quicksearch onAfter -опция: - вот так:

onAfter: function (){
    window.resizeBy(101,0);
}

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

Кто-нибудь делал что-нибудь подобное?
- или есть ли способ переместить "кирпичи" Masonry после события, например, keyUp или что-то в этом роде?


jquery window-resize quick-search jquery-masonry
person ThomasK    schedule 02.01.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте использовать следующее, у меня это сработало, за исключением одного (далее ниже):

jQuery('input#inputfinderid').quicksearch('#content-block .item-to-search',
                {
                'delay': 200,

                'show': function () {
                //show parent of the items found
                    jQuery(this).parent().show();
                },
                'hide': function () {
                //hide parent of the items not found
                    jQuery(this).parent().hide();
                },


                'onAfter': function () {
                    if (jQuery('input#inputfinderid').val()) {
                        //hide parent as you type
                        jQuery(this).parent().parent().hide();

                    } else {
                //show parent as you type
                        jQuery(this).parent().parent().show();
                    }
                    //re-sort masonry objects
                    jQuery('.js-masonry').masonry('layout');                        
                }
            });

Единственная проблема, с которой я сталкиваюсь, заключается в том, что иногда макет не настраивается должным образом, и если у меня есть 3 столбца, он создаст 3 строки с 1 столбцом/элементом в каждой. Однако иногда он правильно отображает все 3 элемента в 1 строке.

Может ли кто-нибудь помочь с этим?

person Accurate    schedule 07.11.2014