WookMark是一款基于jquery的瀑布流插件，使用起來也非常的簡單：

1、調(diào)用jquery庫；2、引用jquery.wookmark.min.js文件（可以去 https://github.com/GBKS/Wookmark-jQuery 下載 ）；3、開始應(yīng)用wookmark，代碼如下： <script type="text/javascript">$('#myContent li').wookmark(); </script> 完整的wookmark的參數(shù)如下： $('#myContent li').wookmark({container: $('#myContent'),offset: 0,itemWidth: 196,autoResize: true }); $('#myContent li')為查找所有單元container 為存放所有單元的容器，默認(rèn)為windowoffset 為每個單元之間垂直與水平方向的間距，默認(rèn)值為2itemWidth 為每個單元的寬度，默認(rèn)值應(yīng)該就是第一個單元的寬度autoResize 為當(dāng)瀏覽器窗口發(fā)生變化是否自動調(diào)整大小，布爾值，默認(rèn)為false

resizeDelay 為自動調(diào)整延遲，默認(rèn)值為50

需要注意的是：需要給容器（ID為myContent這個標(biāo)簽）添加 position:relative;樣式

在使用過程中可能存在的問題：

1、使用下面的代碼時發(fā)現(xiàn)在其他瀏覽器都能正常顯示，而在谷歌瀏覽器中無論怎么設(shè)置參數(shù)在同一列的圖片都重疊在一起了 $(function(){$("#myContent").wookmark(); }) 上面的那種情況不知道是不是webkit內(nèi)核瀏覽器的BUG，使用這種方法是無法獲取到圖片的高度的，解決的方法如下（需要等頁面加載完之后才能獲取到圖片的高度）： $(function(){$(window).load(function(){$("#myContent").wookmark();}); }) 2、在IE6/7中不能正常的顯示，而在IE8+等其他瀏覽器均正常，解決的方法：將autoResize設(shè)置為true即可。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。