当前位置:K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
jQuery瀑布流插件 Masonry
-->
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>k88壁纸</title> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script> <style> .container-fluid { padding: 20px; } .box { margin-bottom: 20px; float: left; width: 220px; } .box img { max-width: 100% } </style> <script> $(function() { var $container = $('#masonry'); $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.box', gutter: 20, isAnimated: true, }); }); }); </script> </head> <body> <div id="masonry" class="container-fluid"> <div class="box"><img src="img/1.jpg"></div> <div class="box"><img src="img/2.jpg"></div> <div class="box"><img src="img/3.jpg"></div> <div class="box"><img src="img/4.jpg"></div> <div class="box"><img src="img/9.jpg"></div> <div class="box"><img src="img/10.jpg"></div> <div class="box"><img src="img/5.jpg"></div> <div class="box"><img src="img/6.jpg"></div> <div class="box"><img src="img/7.jpg"></div> <div class="box"><img src="img/8.jpg"></div> <div class="box"><img src="img/11.jpg"></div> ... </div> </body> </html> |
jQuery瀑布流插件 Masonry