通过masonry插件实现完美布局

    大家在进行秦皇岛网站制作的时候可能会遇到图片列表展示的时候，图片的大小不一致，如果全是限制大小的话图片可能会变形，那个统一定义一个宽度又会倒是高度不同，这样就会让图片列表错乱无序，那么通过什么方式可以让错落无序变成错落有序呢？
今天笔者为大家接受一个jq插件名字叫：masonry，当然是国外牛人写的啦！
废话不多说先看看我自己网站使用的效果：

调试masonry很简单的，看下边的步骤：
第一步：准备好masonry和jquery框架
jquery的下载地址：点击下载
masonry的下载地址：点击下载
第二步：在需要的网页加入以下HTML代码作为图片列表

	
	

		...
	

	

		...
	

	

		...
	

	

		...
	

	

		...
	

	

		...
	

	

		...
	

	

		...
	

#container的样式你可以根据你自己的需求去定义，.item的样式也是可以随意定义，不过请不要设置漂浮！
然后再HTML下方分别载入jq与masonry，代码如下：

这个时候已经可以实现以上的列表样式了，先看一下：

如果您的ITEM容器中含有图片需要等待图片载入完成后再执行样式排版，所以如果你的item容器中有图片的话，请将上方的js替换为一下：

谢谢大家，基本的操作方式就是这么简单，如果有什么问题请联系我
下面是利用masonry制作的一些网站案例：
http://www.qhdsudu.com/anli/index/3/sa/