Question

我对最新的Masonry插件（v3）有疑问。我需要追加隐藏的元素并动态显示它们。所以，我隐藏了一些元素并绑定了＃34;点击＆＃34;事件以显示更多元素。但问题是元素不能很好地附加。通过点击底部的按钮，新元素看起来不太好。所有人都有＆＃34;左：0＆＃34;

我使用此代码。对于init：

    var $photos_wrapper = jQuery('#photos_wrapper');
    jQuery(window).load(function(){

            $photos_wrapper.masonry({
                itemSelector : '.plug',
                gutter : 15,
                columnWidth : 180,
                isAnimated: !Modernizr.csstransitions
            });
            jQuery("div.num").not(":contains('0')").closest('.item').hide();
            $photos_wrapper.masonry();
    });

这适用于点击事件：

    jQuery(function(){
        var pg = 0;
        if(pg+2 > max) {
            jQuery('div.more-products').hide();
        }
        jQuery('div.more-products').click(function() {
            pg++;
            jQuery(this).hide();

            var newElements = jQuery("div.num:contains('"+pg+"')").closest('.item');
            newElements.imagesLoaded(function(){
                $photos_wrapper.append(newElements);
                $photos_wrapper.masonry('appended', newElements, true);
            });
        });
    });

出了什么问题？......

Answer 1

<强>更新好吧，我发现更简单的把我隐藏的元素放到另一个div（不是砌体容器），然后像我之前那样追加它们。所以，我把所有隐藏的元素都放到 .hidden-items div并设置 display：none;

jQuery('div.more-products').click(function() {
            jQuery(this).hide();

            var newElements = jQuery(".hidden-items div.num:contains('"+pg+"')").closest('.item');
            newElements.imagesLoaded(function(){
                $photos_wrapper.append(newElements);
                $photos_wrapper.masonry('appended', newElements, true);
            });

            jQuery(window).scroll(function(){
                if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
                    pg++;
                    var newElements = jQuery(".hidden-items div.num:contains('"+pg+"')").closest('.item');
                    newElements.imagesLoaded(function(){
                        $photos_wrapper.append(newElements);
                        $photos_wrapper.masonry('appended', newElements, true);
                    });
                }
            });
        });

砌体隐藏和附加

1 个答案: