jquery – masonry瀑布流,並使用imagesLoaded 避免覆蓋圖片
現在改版後的masonry說明的清楚多了
http://masonry.desandro.com/appendix.html
目前我介紹的版本是 v3.1.2
官方說明滿清楚的,我這邊使用jQuery介紹
下載http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js 並插入到你的網頁中
插入以下範例
<style> .item { width: 25%; border:1px solid black; } .item.w2 { width: 50%; } </style> <script type="text/javascript" src="imagesloaded.pkgd.min.js"></script> <script> $(function (){ var $container = $('#container'); //當圖片讀取完畢才執行 $container.imagesLoaded(function (){ // initialize $container.masonry({ columnWidth: 100, itemSelector: '.item', }) }); }); </script> <div id="container"> <div class="item">A</div> <div class="item w2">B</div> <div class="item">C</div> </div>
主要重點在於使用imagesLoaded,
可以當圖片下載完畢後,才執行masonry渲染,確保DIV不會被圖片覆蓋。
可參考說明:http://masonry.desandro.com/appendix.html
裡面有外掛 imagesLoaded 的載點~