大家在進行秦皇島網(wǎng)站制作的時候可能會遇到圖片列表展示的時候，圖片的大小不一致，如果全是限制大小的話圖片可能會變形，那個統(tǒng)一定義一個寬度又會倒是高度不同，這樣就會讓圖片列表錯亂無序，那么通過什么方式可以讓錯落無序變成錯落有序呢？
今天筆者為大家接受一個jq插件名字叫：masonry，當然是國外牛人寫的啦！
廢話不多說先看看我自己網(wǎng)站使用的效果：

調試masonry很簡單的，看下邊的步驟：
第一步：準備好masonry和jquery框架
jquery的下載地址：點擊下載
masonry的下載地址：點擊下載
第二步：在需要的網(wǎng)頁加入以下HTML代碼作為圖片列表

	
	

		...
	

	

		...
	

	

		...
	

	

		...
	

	

		...
	

	

		...
	

	

		...
	

	

		...
	

#container的樣式你可以根據(jù)你自己的需求去定義，.item的樣式也是可以隨意定義，不過請不要設置漂??！
然后再HTML下方分別載入jq與masonry，代碼如下：

這個時候已經(jīng)可以實現(xiàn)以上的列表樣式了，先看一下：

如果您的ITEM容器中含有圖片需要等待圖片載入完成后再執(zhí)行樣式排版，所以如果你的item容器中有圖片的話，請將上方的js替換為一下：

謝謝大家，基本的操作方式就是這么簡單，如果有什么問題請聯(lián)系我
下面是利用masonry制作的一些網(wǎng)站案例：
http://www.thoroughlyalive.com/anli/index/3/sa/