Jquery實現瀑布流布局插件

dengjianbin 12年前發布 | 55K 次閱讀 jQuery頁面高級組件 jQuery插件
瀑布流，又稱瀑布流式布局。

是目前比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局

功能使用也簡單，引入插件之后，頁面寫幾行代碼就可以實現了
 
效果如下
Jquery插件,Jquery資源,Jquery特效,div+css

主要代碼如下：
  <div id="main">
<ul id="content">
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h25 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h80 post"></li>
    <li class="h100 post"></li>
    <li class="h45 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h25 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h80 post"></li>
    <li class="h100 post"></li>
    <li class="h45 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h25 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h80 post"></li>
    <li class="h100 post"></li>
    <li class="h45 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
    <li class="h30 post"></li>
    <li class="h50 post"></li>
</ul>
</div>
<script type="text/javascript" src="http://www.jq-school.com/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function(){  
   $('#content').masonry({
    itemSelector : '.post',
    columnWidth : 70
  });  
});
</script>

項目主頁：http://www.baiduhome.net/lib/view/home/1344614322350

 本文由用戶 dengjianbin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！