瀑布式布局实现

实现这个效果需要两个jQuery插件infinite-scroll和Masonry。

infinite-scroll-jquery

参数详解：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$( '#content' ).infinitescroll({      navSelector  : "div.navigation" , //导航的选择器，会被隐藏      nextSelector : "div.navigation a:first" , //包含下一页链接的选择器      itemSelector : "#content div.post" , //你将要取回的选项(内容块)      debug        : true , //启用调试信息      loadingImg   : "/img/loading.gif" , //加载的时候显示的图片                     //默认采用："<a href="http://www.infinite-scroll.com/loading.gif">http://www.infinite-scroll.com/loading.gif</a>"      animate      : true , //当有新数据加载进来的时候，页面是否有动画效果，默认没有      extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150      bufferPx     : 40, //载入信息的显示时间，时间越大，载入信息显示时间越短      errorCallback: function (){}, //当出错的时候，比如404页面的时候执行的函数      localMode    : true //是否允许载入具有相同函数的页面，默认为false      }, function (arrayOfNewElems){      //程序执行完的回调函数   });

 取消绑定事件的函数写法：$(window).unbind(‘.infscr’); 通过事件触发加载数据的写法：

$(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中

此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容，可以是id以及是class，并转化到html存储。要比jquery自带的的load强大多了。

$('').load('/page/2/ #content div.post',function(){      $(this).appendTo('#content');  });

官方首页及下载地址: http://www.infinite-scroll.com/

Masonry

参数详解：

?

1 2 3 4 5 6 7 8 9 10 11

$( function (){   $(? #container?).masonry({  // options 设置选项  itemSelector : ?.item?, //子类元素选择器   columnWidth : 240 , //一列的宽度 ，包括边距 220+10+10   isAnimated: true , //使用jquery的布局变化，是否启用动画效果   animationOptions:{   //jquery animate属性 ，动画效果选项。比如渐变效果   Object { queue: false , duration: 500 }  },   gutterWidth:0, //列的间隙   isFitWidth: true , //自适应宽度   isResizableL: true , // 是否可调整大小   isRTL: false , //使用从右到左的布局  });   });

官方首页及下载地址：http://masonry.desandro.com/index.html

双剑合璧

本博客部分演示代码：

 
 

  
  

   
   

    
    ?
   
   
   
   
 
       

         1 
       
 
       

         2 
       
 
       

         3 
       
 
       

         4 
       
 
       

         5 
       
 
       

         6 
       
 
       

         7 
       
 
       

         8 
       
 
       

         9 
       
 
       

         10 
       
 
       

         11 
       
 
       

         12 
       
 
       

         13 
       
 
       

         14 
       
 
       

         15 
       
 
       

         16 
       
 
       

         17 
       
 
       

         18 
       
 
       
 
        
 
         < 
         div 
         class 
         = 
         "img_div" 
         > 
        
 
        
 
               
        
 
        
 
              
         < 
         div 
         id 
         = 
         "container" 
         > 
        
 
        
 
                   
        
 
        
 
                  
         < 
         div 
         class 
         = 
         "item" 
         > 
        
 
        
 
                      
         < 
         img 
         src 
         = 
         "/phpwork/myblog/res/userimage/" 
         alt 
         = 
         "" 
         >  
        
 
        
 
                  
         </ 
         div 
         > 
        
 
        

            
        
 
        
 
              
         </ 
         div 
         > 
        
 
        

            
        
 
        
 
              
         < 
         div 
         id 
         = 
         "more" 
         > 
        
 
        
 
                  
         < 
         a 
         href 
         = 
         "/phpwork/myblog/index.php/Image/image/p/2" 
         ></ 
         a 
         >  
        
 
        
 
              
         </ 
         div 
         > 
        
 
        

            
        
 
        
 
         </ 
         div 
         > 
        
 
       
  
  
 
 


接下来是JS文件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

$( function (){      function item_callback(){          $( '.item img' ).load( function (){              $( '#container' ).masonry({                  // options                  itemSelector : '.item' ,                  columnWidth : 350                });          });          $( '#container' ).masonry({              // options              itemSelector : '.item' ,              columnWidth : 350            });            $( '.item' ).mouseover( function (){                 $( this ).css( 'box-shadow' , '0 1px 5px rgba(35,25,25,0.5)' );             }).mouseout( function (){                 $( this ).css( 'box-shadow' , '0 1px 3px rgba(34,25,25,0.2)' );                   });        }      item_callback();        var sp = 1       var count = $( "#count" ).val();      $( "#container" ).infinitescroll({           navSelector     : "#more" ,           nextSelector    : "#more a" ,           itemSelector    : ".item" ,                       loading:{               img: "/phpwork/myblog/res/img/ajax-loader.gif" ,              msgText: ' ' ,               finishedMsg: '木有了' ,              animate      : true ,              extraScrollPx: 50,               finished: function (){                   sp++;                   if (sp>=count){ //到第10页结束事件                       $( "#more" ).remove();                       $( "#infscr-loading" ).hide();                     // $("#page").show();                       $(window).unbind( '.infscr' );                   }               }              },errorCallback: function (){                //$("#page").show();           }                   }, function (newElements){           var $newElems = $(newElements);           $newElems.hide();         $( '#container' ).masonry( 'appended' , $newElems, false );           $newElems.fadeIn();           item_callback();         // $newElems.fadeIn();         // return;       });  });