织梦首页如何实现图片瀑布流效果

............
............
............
............
............
...
...

使用masonry插件,在页面之前加以下代码

$(function(){
	//使用masonry插件
var $container = $('#mynews');//#mynews是你首页这堆图片的容器id
$container.imagesLoaded(function(){
  $container.masonry({
		itemSelector : '.col',
		columnWidth : 242,
        isAnimated: true
  });
});	



    $container.infinitescroll({
      navSelector  : '#pagelist',    // selector for the paged navigation 
      nextSelector : '#nx a',  // selector for the NEXT link (to page 2)
      itemSelector : '.col',     // selector for all items you'll retrieve
	  extraScrollPx: 250,        //离网页底部多少像素时触发ajax  
      donetext  : 'No more pages to load.',
      loadingImg : 'http://i.imgur.com/6RMhx.gif',
      debug: true,
      errorCallback: function() { 
        // fade out the error message after 2 seconds
        $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
      }
      },
      // call Masonry as a callback
      function( newElements ) {
        var $newElems = $( newElements );
        // position elements at the bottom center
        $newElems.css({
          left: $container.width() / 2,
          top: $container.height(),
        })
        
        // pause so it appears new items get added from bottom 
        setTimeout( function(){
          // ensure that images load before adding to masonry layout
          $newElems.imagesLoaded(function(){
            $container.masonry( 'appended', $newElems ); 
          });
          
        }, 10 );
        
      }
    );

});

参考http://www.diy93.com/down/js/js2012122101/masonry-site/demos/animating-jquery.html