【JQ】瀑布流排版

官网下载：
http://masonry.desandro.com/
当前版本：2.1.08

简单用法：

[javascript] view plaincopy?

1. <div id="container">  
2.   <div class="item">...</div>  
3.   ...  
4. </div>  
5. //CSS  
6. .item { width: 220px; margin: 10px; float: left;}  
7. //JS  
8. $(function(){  
9.   $('#container').masonry({  
10.     // options  
11.     itemSelector : '.item',  
12.     columnWidth : 240  
13.   });  
14. });  

 更多参数：

[javascript] view plaincopy?

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

 图片加载完后再调用：

[javascript] view plaincopy?

1. var $container = $('#container');  
2. $container.imagesLoaded(function(){  
3.   $container.masonry({  
4.     itemSelector : '.item',  
5.     columnWidth : 240  
6.   });  
7. });  

关于动画：动画只要把isAnimated:true就可以了，还可以设如animationOptions: {duration: 750, easing: 'linear',queue: false }来设置，
当然，也可以不用他的此功能，你自己用CSS3做动画：

[css] view plaincopy?

1. .masonry,  
2. .masonry .masonry-brick {  
3.   -webkit-transition-duration: 0.7s;  
4.      -moz-transition-duration: 0.7s;  
5.       -ms-transition-duration: 0.7s;  
6.        -o-transition-duration: 0.7s;  
7.           transition-duration: 0.7s;  
8. }  
9.   
10. .masonry {  
11.   -webkit-transition-property: height, width;  
12.      -moz-transition-property: height, width;  
13.       -ms-transition-property: height, width;  
14.        -o-transition-property: height, width;  
15.           transition-property: height, width;  
16. }  
17.   
18. .masonry .masonry-brick {  
19.   -webkit-transition-property: left, right, top;  
20.      -moz-transition-property: left, right, top;  
21.       -ms-transition-property: left, right, top;  
22.        -o-transition-property: left, right, top;  
23.           transition-property: left, right, top;  
24. }  

 PS:更厉害的功能和动画，在其官网上有演示，包括增加内容块动画，乱排序动画，和无限滚动条配合的增加动画等。
其中1：点击按钮增加内容、点击按钮重排序

[javascript] view plaincopy?

1. <script src="css_js/jquery-1.7.1.min.js"></script>  
2. <script src="css_js/jquery.masonry.min.js"></script>  
3. <script src="css_js/jbox-maker.js"></script>  
4. //页面基础语句  
5. <script>  
6.   $(function(){  
7.       
8.     var $container = $('#container');  
9.       
10.     $container.masonry({  
11.       itemSelector: '.box',  
12.       columnWidth: 100,  
13.       isAnimated: !Modernizr.csstransitions  
14.     });  
15.       
16.     $('#prepend').click(function(){  
17.       var $boxes = $( boxMaker.makeBoxes() );  
18.       $container.prepend( $boxes ).masonry( 'reload' );  
19.     });  
20.       
21.     $('#append').click(function(){  
22.       var $boxes = $( boxMaker.makeBoxes() );  
23.       $container.append( $boxes ).masonry( 'appended', $boxes );  
24.     });  
25.       
26.   });  
27. </script>  

其中jbox-maker.js的内容是：

[javascript] view plaincopy?

1. /* 
2.  *  This is just a utitlity script so we can  
3.  *  add random content to masonry-ed layouts 
4.  */  
5.   
6. var boxMaker = {};  
7. //下面是将随机出现的文字内容集，以.分隔  
8. boxMaker.lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu interdum odio. Cras lobortis mauris vitae tellus consectetur sit amet cursus ipsum vestibulum. Duis facilisis sodales tristique. Vivamus aliquet, est a rhoncus dapibus, velit tortor tempor turpis, a pharetra diam lacus a metus. Donec gravida faucibus magna, nec laoreet nibh placerat et. Cras magna lorem, faucibus vitae rhoncus ac, tincidunt vel velit. Mauris aliquam, risus vel sodales laoreet, mi nulla faucibus nunc, eu tincidunt nisi leo sed orci. Curabitur sagittis libero eu augue luctus ullamcorper. Phasellus sed tortor sed nunc elementum rutrum. Maecenas eu enim a nulla faucibus commodo iaculis tempor orci. Integer at ligula id mauris semper bibendum at eu erat. Integer vestibulum sem nec risus iaculis eu rhoncus tellus tempor. Suspendisse potenti. Sed bibendum nibh non velit blandit eu adipiscing ligula consectetur. Vivamus turpis quam, fringilla a elementum a, condimentum non purus. Pellentesque sed bibendum ante. Fusce elit mauris, pulvinar sed rutrum eget, malesuada in nisi. Etiam sagittis pretium ligula. Aliquam a metus orci, a molestie lacus. Suspendisse potenti. Mauris vel volutpat nunc. In condimentum imperdiet scelerisque. Cras aliquam tristique velit non iaculis. Aliquam pulvinar sagittis sodales. Aenean risus orci, elementum quis accumsan eget, elementum cursus tellus. Nunc vel laoreet odio. Maecenas sollicitudin, tellus vel bibendum ornare, tellus nibh hendrerit lorem, quis volutpat turpis odio ac ligula. Etiam tempus neque id libero feugiat fringilla. Nullam posuere consequat vehicula. Mauris in lorem eget sem tempor condimentum. Integer rhoncus accumsan elit eu gravida. Donec dictum ante ac nisl adipiscing vel tempor libero luctus. Praesent bibendum augue at erat semper rutrum. Fusce vel orci nulla. Vivamus condimentum, odio vel condimentum tempus, mauris ipsum gravida odio, sed viverra dolor velit sit amet magna. Donec aliquam malesuada ipsum ut suscipit. Vivamus porttitor posuere iaculis. Vestibulum lectus lorem, tincidunt at sodales et, euismod vel quam. Sed eget urna nunc. In quis felis nunc. Aliquam erat volutpat. Cras ut dui ac leo aliquet placerat faucibus in nulla. Mauris pharetra ligula et tortor ultricies eget elementum libero blandit. Praesent tincidunt, mi quis aliquam faucibus, leo risus placerat odio, ac adipiscing ante urna at tortor.'.split(".");  
9.   
10. boxMaker.loremLen = boxMaker.lorem.length;  
11.     
12. boxMaker.randoLoremText = function() {  
13.   var loremText = '',  
14.       sentences = Math.random() * 5;  //每块里随机1-5个句子  
15.   for (var j=0; j < sentences; j++ ) {  
16.     var whichSentence = Math.floor( Math.random() * boxMaker.loremLen );  
17.     loremText += boxMaker.lorem[whichSentence] + '. ';  
18.   }  
19.   return loremText;  
20. };  
21.   
22. boxMaker.makeBoxes = function() {  
23.   var boxes = [],  
24.       count = Math.random()*4; //随机增加1-4个块  
25.   
26.   for (var i=0; i < count; i++ ) {  
27.     var box = document.createElement('div'),  
28.         text = document.createTextNode( boxMaker.randoLoremText() );  
29.       
30.     box.className = 'box col' +  Math.ceil( Math.random()*3 );  
31.     box.appendChild( text );  
32.     // add box DOM node to array of new elements  
33.     boxes.push( box );  
34.   }  
35.   
36.   return boxes;  
37. };