使用jQuery Masonry在同一个站点中多次使用 [英] Using jQuery Masonry Many times in the same site
本文介绍了使用jQuery Masonry在同一个站点中多次使用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在同一个网站上使用jQuery砌体3次。每个代码块都独立工作,但是当尝试同时使用全部3时,只有最后一个工作。如何将这些组合起来保持不同的价值和选择器?
I'm trying to use jQuery masonry 3 times on the same site. Each code block works independently but when trying to use all 3 at once, only the last one works. How can I combine these to work yet keep the different values and selectors each has?
/** 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专家,但这很容易。这就是在盯着这个太长时间后发生的事情。
Wow, thanks Kevin. I'm not a JS expert but that was easy. That is what happens after staring too long at this.
/** 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
}
});
});
这篇关于使用jQuery Masonry在同一个站点中多次使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文