jquery瀑布流排列样式代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery瀑布流排列样式代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="gb2312">
    <title>jquery瀑布流排列样式代码</title>
    <style>
        body{margin:0}
    </style>
</head>
<body>

<div class="grid">
	<img src="images/asian-landscape.jpg">
	<img src="images/traditional-landscape.jpg">
	<img src="images/contemporary-landscape.jpg">
	<img src="images/rustic-landscape.jpg">
	<img src="images/traditional-landscape.jpg">
	<img src="images/beach-style-landscape.jpg">
	<img src="images/farmhouse-landscape.jpg">
	<img src="images/contemporary-landscape.jpg">
	<img src="images/traditional-landscape.jpg">
	<img src="images/contemporary-landscape.jpg">
	<img src="images/contemporary-landscape.jpg">
	<img src="images/mediterranean-landscape.jpg">
	<img src="images/mediterranean-landscape.jpg">
	<img src="images/contemporary-landscape.jpg">
	<img src="images/farmhouse-landscape.jpg">
	<img src="images/traditional-landscape.jpg">
	<img src="images/contemporary-landscape.jpg">
	<img src="images/asian-landscape.jpg">
	<img src="images/farmhouse-landscape.jpg">
	<img src="images/tropical-landscape.jpg">
	<img src="images/traditional-landscape.jpg">
	<img src="images/traditional-landscape.jpg">
</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/gridify.js"></script>
<script type="text/javascript">
	$(window).load(function() {
		var options =
		{
			srcNode: 'img',             // grid items (class, node)
			margin: '20px',             // margin in pixel, default: 0px
			width: '250px',             // grid item width in pixel, default: 220px
			max_width: '',              // dynamic gird item width if specified, (pixel)
			resizable: true,            // re-layout if window resize
			transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
		}
		$('.grid').gridify(options);
	});
</script>

</body>
</html>

JS代码(gridify-min.js):

"use strict";
	!function(n){
	"function"==typeof define&&define.amd?define(["jquery"],n):n(jQuery)}
(function(n){
	n.fn.extend({
	imagesLoaded:function(i){
	var e=n(this).find("img"),t=e.length;
	0==t&&i();
	for(var r=0,a=e.length;
	a>r;
	r++){
	var o=new Image;
	o.onload=o.onerror=function(){
	t--,0==t&&i()}
,o.src=e[r].src}
}
,gridify:function(i){
	var e=n(this),i=i||{
}
,t=function(n){
	for(var i=0,e=1,t=n.length;
	t>e;
	e++)n[e]<n[i]&&(i=e);
	return i}
,r=function(){
	e.css("position","relative");
	var r=e.find(i.srcNode),a=(i.transition||"all 0.5s ease")+",height 0,width 0",o=e.innerWidth(),s=parseInt(i.margin||0),d=parseInt(i.max_width||i.width||220),f=Math.max(Math.floor(o/(d+s)),1),h=1==f?s/2:o%(d+s)/2,c=[];
	i.max_width&&(f=Math.ceil(o/(d+s)),d=(o-f*s-s)/f,h=s/2);
	for(var u=0;
	f>u;
	u++)c.push(0);
	for(var u=0,g=r.length;
	g>u;
	u++){
	var l=n(r[u]),v=t(c);
	l.css({
	width:d,position:"absolute",margin:s/2,top:c[v]+s/2,left:(d+s)*v+h,transition:a}
),c[v]+=l.innerHeight()+s}
}
;
	if(e.imagesLoaded(r),i.resizable){
	var a=n(window).bind("resize",r);
	e.on("remove",a.unbind)}
}
}
)}
);

附件:下载该文件资源,减少时间成本(增值服务)