Javascript 在同一站点中多次使用jQuery砌体
我尝试在同一个站点上使用jQuery砌体3次。每个代码块独立工作,但当试图同时使用所有3个代码块时,只有最后一个代码块工作。我如何将它们结合起来工作,同时保持每个值和选择器的不同Javascript 在同一站点中多次使用jQuery砌体,javascript,jquery,Javascript,Jquery,我尝试在同一个站点上使用jQuery砌体3次。每个代码块独立工作,但当试图同时使用所有3个代码块时,只有最后一个代码块工作。我如何将它们结合起来工作,同时保持每个值和选择器的不同 /** First Instance **/ var $container = $('.smallcolwrap'); $container.imagesLoaded(function(){ $container.masonry({ itemSelec
/** First Instance **/
var $container = $('.smallcolwrap');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.smallcol',
columnWidth: function( containerWidth ) {
return containerWidth / 3; },
isAnimated: true
});
});
/** Second Instance **/
var $container = $('.slickr-flickr-gallery');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : 'li',
columnWidth: 160,
isAnimated: true
});
});
/** Third Instance **/
var $container = $('.navigationHome');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : 'li',
columnWidth: function( containerWidth ) {
return containerWidth / 2; },
isAnimated: true,
animationOptions: {
duration: 250,
easing: 'linear',
queue: false
}
});
});
哇,谢谢你,凯文。我不是JS专家,但这很容易。这就是长时间盯着这件事之后发生的事情
/** First Instance **/
var $container = $('.smallcolwrap');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.smallcol',
columnWidth: function( containerWidth ) {
return containerWidth / 3; },
isAnimated: true
});
});
/** Second Instance **/
var $container1 = $('.slickr-flickr-gallery');
$container1.imagesLoaded(function(){
$container1.masonry({
itemSelector : 'li',
columnWidth: 160,
isAnimated: true
});
});
/** Third Instance **/
var $container2 = $('.navigationHome');
$container2.imagesLoaded(function(){
$container2.masonry({
itemSelector : 'li',
columnWidth: function( containerWidth ) {
return containerWidth / 2; },
isAnimated: true,
animationOptions: {
duration: 250,
easing: 'linear',
queue: false
}
});
});
为每个
var$container
变量指定一个唯一的名称,否则每个变量都将覆盖上一个变量。