且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用jQuery Masonry在同一个站点中多次使用

更新时间:2022-12-20 19:08:54

哇,谢谢凯文。我不是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
            }
      });
    });