0

結果を jQuery Masonry スタイル ( http://masonry.desandro.com/ ) と jQuery Quicksearch ( https://github.com/DeuxHuitHuit/quicksearch ) で表示します。
検索を行うと、一致しない「レンガ」が削除/非表示になります-これは正しいです。しかし、残りの一致する「レンガ」は、特定の位置にロックされているため、ページ全体に広がっています。

Masonryは、ブラウザ ウィンドウの幅を変更するときに「レンガ」の位置を変更できることを知っているので、最初のアイデアは、 Quicksearchに何か+1pxを-1px追加することで、この効果をトリガーすることでしたonAfter-option: - のように:

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

ウィンドウサイズを変更できるかどうかを確認するためだけに、これはまったく機能しませんでした。

似たようなことをした人はいますか？
- または、何かのイベントの後にメイソンリーの「レンガ」の位置を変える方法はありkeyUpますか?

4

1 に答える 1

0

以下を使用してみてください。1つのことを除いてうまくいきました（さらに下）： 

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 つの列がある場合、それぞれに 1 つの列/項目を持つ 3 つの行が作成されることです。それでも、3 つの項目すべてを 1 行に正しく表示する場合があります。

誰でもそれを手伝ってもらえますか?

于 2014-11-07T18:39:36.747 に答える