Jquery 砌体隐藏和附加
我对最新的砌体插件(v3)有问题。 我需要附加隐藏元素并动态显示它们。所以,我隐藏了一些元素,并绑定“click”事件来显示更多的元素。但问题是元素没有很好地附加。 通过点击底部的按钮,新元素看起来不太好。它们都有“左:0” 我使用这个代码。对于init:Jquery 砌体隐藏和附加,jquery,jquery-masonry,Jquery,Jquery Masonry,我对最新的砌体插件(v3)有问题。 我需要附加隐藏元素并动态显示它们。所以,我隐藏了一些元素,并绑定“click”事件来显示更多的元素。但问题是元素没有很好地附加。 通过点击底部的按钮,新元素看起来不太好。它们都有“左:0” 我使用这个代码。对于init: var $photos_wrapper = jQuery('#photos_wrapper'); jQuery(window).load(function(){ $photos_wrapper.mas
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);
});
});
});
怎么了?…更新
好的,我发现将隐藏的元素放到另一个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);
});
}
});
});