早就聽聞瀑布流布局，今天用jquery試著寫出，不夠完善，基本能用。
照例先奉上最終效果圖：

HTML結構代碼：

<div id="waterfall"><ul><li><img src="img/1.jpg"></li><li><img src="img/2.jpg"></li><li><img src="img/3.jpg"></li><li><img src="img/4.jpg"></li><li><img src="img/5.jpg"></li></ul> </div>

樣式文件：

#waterfall{margin: 30px 0; } #waterfall ul{margin: 0;padding: 0;position: relative; } #waterfall li{list-style: none;position: absolute;padding: 0;display: none;background-color: #ccc; } #waterfall img{width: 100%;}

插件部分：

;(function(){$.fn.waterfall = function(object){var object = object || {},imgWidth = object.imgWidth || 120,divideWidth = object.divideWidth || 6,divideHeight = object.divideHeight || divideWidth,imgNum = object.imgNum || 5,loadNum = object.loadNum || 6,arrH = [];for (var i = 0; i < imgNum; i++) {arrH.push(0);} window.onscroll = function(){if (Isfall()) {fall(1);}}var Isfall = function(){var lastH = Math.floor($('#waterfall').find('li:last').height()/2) + $('#waterfall').find('li:last').offset().top,scrollTop = $(window).scrollTop(),winH = $(window).height();return (lastH - scrollTop < winH)?true:false;}var fall = function(len){if (len != 0) {len = $('li').size();for (var i = 0; i < loadNum; i++) {$('#waterfall ul').append('<li><img src="img/'+Math.ceil(Math.random()*5)+'.jpg"></li>');}}$('#waterfall li').each(function(index){if (index>=len) {var minH = Math.min.apply( null, arrH );var minHIndex = $.inArray( minH, arrH );$(this).css({'width':imgWidth,'left':minHIndex*(imgWidth+divideWidth) + 'px','top':minH + 'px','display':'block'});arrH[minHIndex] += $(this).height()+divideHeight;}})}fall(0);} })(jQuery)

這個觸發加載圖片的點是在判斷最后一張圖片距離瀏覽器窗口頂部的偏移加上其自身高度一半減去滾動條距離瀏覽器窗口頂部的偏移是否小于當前瀏覽器的高度。
設置一個數組記錄每列圖片疊加起來的高度，每次判斷最小高度列，向該列追加圖片。

引用代碼：

$(document).ready(function(){$('#waterfall').waterfall({imgWidth:200,divideWidth:20,divideHeight:20,imgNum:4,loadNum:6}); })

自定義內容：
imgWidth：每張圖片的寬度，高度自動適應，默認120px；
divideWidth：圖片間隔寬度，默認6px;；
divideHeight：圖片間隔高度，若不指定則等于寬度間隔；
imgNum：每行圖片數量，默認4；
loadNum：每次加載圖片數量，默認6。

存在問題：初始時頁面須含有圖片，否則取得列高度值有誤。后期來改。

完整代碼插件下載地址：插件下載地址。

總結

以上是生活随笔為你收集整理的瀑布流插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。