文档章节

基于jQuery的waterfall(瀑布流)布局

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 925
阅读 23
收藏 0
<!DOCTYPE html> 
<html> 
	<head> 
	<title>基于Jquery的瀑布流布局(绝对定位)</title> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		ul {position:relative;font-size:12px;}
		p {margin:10px 10px}
		p a {text-decoration:none;color:#0088cc}
		p a:hover {text-decoration:underline;}
		ul li {width:250px;border:1px solid #ccc;border-radius:5px;list-style:none;position:absolute;margin:10px;height:150px;}
		li.a {height:350px;}
		li.b {height:100px;}
		li.c {height:200px;}
		li.d {height:500px;}
		li.e {height:100px;}
		li.f {height:50px;}
		li.g {height:180px;}
		li.h {height:210px;}
		li.i {height:300px;}
		li.j {height:100px;}
		.red {background:red;}
		.yellow {background:yellow;}
		.blue {background:blue;}
		.eee {background:#eee;}
		.green {background:green}
		.ccc {background:#ccc;}
		.hide {opacity:0;filter:alpha(opacity=0)}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script id="setwaterfall">
	(function ($) {
		$.fn.setwaterfall = function (options) {
			function findLowestIndex(Arr)
							{
								var index = 0;
								var i;
								for (i in Arr)
								{
									if(Arr[i]<Arr[index])
									{
										index = i;
									}
								}
								return index;
							};

			function findBigestIndex(Arr)
							{
								var index = 0;
								var i;
								for (i in Arr)
								{
									if(Arr[i]>Arr[index])
									{
										index = i;
									}
								}
								return index;
							};

		   var boxwidth = $(this).width()+parseInt($(this).css("paddingLeft"))*2+parseInt($(this).css("marginLeft"))*2;
		   var wrapWidth = $(this).parent().width();
		   var col = Math.floor(wrapWidth/boxwidth);
           var wrappadding = (wrapWidth % boxwidth) /2;
		   var row = Math.floor($(this).length/col) == $(this).length/col?$(this).length/col:(Math.floor($(this).length/col)+1);
		   var colhigharry = [];
		   var colpos;
		   var leftpos;
		   var toppos;
		   for(var len = 0;len < col;len++)
		   {
				colhigharry.push(0);
		   };
		   $(this).each(function(index){
					var pos = index;
					var col1height = 0;
					var col2height = 0;
					var col3height = 0;
					var col4height = 0;
					if(pos<col)
					{
						leftpos = boxwidth*pos + wrappadding + "px";
						$(this).css({"top":"0","left":leftpos});
						colhigharry[index] = $(this).height()+parseInt($(this).css("marginTop"))*2+parseInt($(this).css("paddingTop"))+parseInt($(this).css("paddingBottom"));
					}
					else
					{
					   colpos = findLowestIndex(colhigharry);
					   leftpos = boxwidth*colpos + wrappadding +"px";
					   toppos = colhigharry[colpos]+"px";
					   $(this).css({"top":toppos,"left":leftpos});
					   colhigharry[colpos] =  colhigharry[colpos] + $(this).height()+parseInt($(this).css("marginTop"))*2+parseInt($(this).css("paddingTop"))+parseInt($(this).css("paddingBottom"));
					}           
		   });
		   var wraphighindex = findBigestIndex(colhigharry);
		   var wraphigh = colhigharry[wraphighindex]+"px";
		   $(this).parent().height(wraphigh);           
		   var selector = $(this).selector;
		   window.onresize = function(){$(selector).setwaterfall();};
			}
	})(jQuery)

	/**
	function setwaterfall(jqobject)
    {
        function findLowestIndex(Arr)
        {
            var index = 0;
            var i;
            for (i in Arr)
            {
                if(Arr[i]<Arr[index])
                {
                    index = i;
                }
            }
            return index;
        }

        function findBigestIndex(Arr)
        {
            var index = 0;
            var i;
            for (i in Arr)
            {
                if(Arr[i]>Arr[index])
                {
                    index = i;
                }
            }
            return index;
        }   
       var $funclist = jqobject;
       var boxwidth = $funclist.width()+parseInt($funclist.css("paddingLeft"))*2+parseInt($funclist.css("marginLeft"))*2;
       var wrapWidth = $funclist.parent().width();
	   console.log(boxwidth + "|" +wrapWidth);
       var col = Math.floor(wrapWidth/boxwidth);
       var row = Math.floor($funclist.length/col) == $funclist.length/col?$funclist.length/col:(Math.floor($funclist.length/col)+1);
       var colhigharry = [];
       var colpos;
       var leftpos;
       var toppos;
       for(var len = 0;len < col;len++)
       {
            colhigharry.push(0);
       };
       $funclist.each(function(index){
                var pos = index;
                var col1height = 0;
                var col2height = 0;
                var col3height = 0;
                var col4height = 0;
                if(pos<col)
                {
                    leftpos = boxwidth*pos + "px";
                    $(this).css({"top":"0","left":leftpos});
                    colhigharry[index] = $(this).height()+parseInt($(this).css("marginTop"))*2+parseInt($(this).css("paddingTop"))*2;
					console.log(colhigharry[index]);
                }
                else
                {
                   colpos = findLowestIndex(colhigharry);
                   leftpos = boxwidth*colpos+"px";
                   toppos = colhigharry[colpos]+"px";
                   $(this).css({"top":toppos,"left":leftpos});
                   colhigharry[colpos] =  colhigharry[colpos] + $(this).height()+parseInt($(this).css("marginTop"))*2+parseInt($(this).css("paddingTop"))*2;
                }           
       });
       var wraphighindex = findBigestIndex(colhigharry);
       var wraphigh = colhigharry[wraphighindex]+"px";
       $funclist.parent().height(wraphigh);    
    }
	**/
	</script>
	<script>
		$(document).ready(function(){
		/**
			setwaterfall($("ul li"));
			window.onresize = function(){return setwaterfall($("ul li"));};
		**/
		

		var obj = [];
		obj[0]=["<li class=\"b red hide\"></li>"];
		obj[1]=["<li class=\"e yellow hide\"></li>"];
		obj[2]=["<li class=\"h blue hide\"></li>"];
		obj[3]=["<li class=\"i green hide\"></li>"];
		obj[4]=["<li class=\"j eee hide\"></li>"];
		obj[5]=["<li class=\"k ccc hide\"></li>"];
		$("ul li").setwaterfall();
		$(window).scroll(function () {
			var clienth = document.documentElement.clientHeight;
			var scrollh = document.documentElement.scrollHeight;
			var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
			if (clienth + scrollt + 200 > scrollh) {
				var html = obj.join("");
				$("ul").append(html);
				$(".hide").animate({opacity:1},1000);
				$("ul li").setwaterfall();
			}
		});

		});

	</script>
</head> 
<body> 

<ul>
<li id="a" class="a"><p>使用方法:</p>
		   <p>1,导入jquery和setwaterfall插件,可直接查看源代码script id="setwaterfall"为该插件,或者点击<a href="setwaterfall.js">setwaterfall.js</a></p>
		   <p>2,如$("li").setwaterfall(),li为要瀑布流化的元素</p>
		   <p>3,设置相应的css,要求父层定位为position:relative;瀑布流的元素定位为position:absolute</p>
		   <p>4,根据需要设置宽和高,padding和mairgin</p>
		   <p>ps:简陋版本,仅供参考</p>
		   </li>
<li id="b" class="a"></li>
<li id="c" class="b"></li>
<li id="d" class="c"></li>
<li id="e" class="e"></li>
<li id="f" class="f"></li>
<li id="g" class="g"></li>
<li id="h" class="h"></li>
<li id="i" class="i"></li>
<li id="j" class="j"></li>
<li id="k" class="k"></li>
<li id="l" class="l"></li>
<li id="m" class="m"></li>
<li id="n" class="n"></li>
<li id="o"></li>
<li id="p"></li>
<li id="q"></li>
<li id="r"></li>
<li id="s"></li>
<li id="t"></li>
<li id="u"></li>
<li id="v"></li>
<li id="w"></li>
<li id="x"></li>
</ul>
 <p style="display:none;"><script src="http://s10.cnzz.com/stat.php?id=2033679&amp;web_id=2033679" type="text/javascript"></script></p>
</body>
</html>

本文转载自:http://lgscofield.iteye.com/blog/1871175

共有 人打赏支持
lgscofield

lgscofield

粉丝 23
博文 140
码字总数 63036
作品 0
南京
架构师
私信 提问
超酷的响应式dribbble设计作品瀑布流布局效果

日期:2013-2-21 来源:GBin1.com 在线演示 相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品...

gbin1
2013/02/27
8
0
jQuery响应式瀑布流布局插件 - Grid-A-Licious

最近瀑布流布局比较流行,那么今天就给大家介绍一个这样的 jQuery 插件 - Grid-A-Licious。 Grid-A-Licious 是一个简单易用的 jQuery 插件,可用于创建响应式瀑布流布局,针对不同设备可自动...

justjavac
2013/11/27
1K
6
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
第45款插件:waterfall.js瀑布流布局单排图片自动滚动

描述:jquery仿堆糖网瀑布流图片布局,设置单排图片上下对齐图片自动上下交替滚动效果。单排图片按左右顺序上下图片自动滚动。 图片展示: 兼容浏览器:IE6+/Firefox/Google Chrome 官方链接...

子弹兄
2013/03/06
0
0
15 个最佳的 jQuery 表格插件

现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点。 大多数网站设计要靠margins, guides, rows and c...

oschina
2013/11/29
16.7K
30

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
44分钟前
0
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部