文档章节

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

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 925
阅读 22
收藏 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

粉丝 22
博文 140
码字总数 63036
作品 0
南京
架构师
私信 提问
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

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

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

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

子弹兄
2013/03/06
0
0
我淘到的各种jQuery Grid网格插件

如今,绝大多数网站都要依靠网格来进行布局,拥有一些好的Grid网格布局插件能大大地节约开发时间,还能在满足响应式布局的同时拥有迷人的外观。接下来,小编带大家来认识15款非常棒的响应式j...

lanmeimei
2014/03/05
0
0
thinkPHP实现瀑布流的方法

thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 过期已备案域名,注册就能用!终身VIP会员,畅享源码下载织梦精美仿站,火热预定中! 本文实例讲述了thinkPHP实现瀑布流的方法。分享给大...

thinkyoung
2015/10/10
0
0
九道前端面试题及答案,妹子总结的

1、什么是W3C标准? WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准...

cacao111
07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
今天
3
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
6
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部