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 的載點~