文档章节

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

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 925
阅读 20
收藏 0
点赞 0
评论 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

粉丝 20
博文 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
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多...

一念三千
2012/10/16
0
0
介绍几个常用的jquery ui框架

jQuery ui框架很多,除了官方提供的jquery UI,还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于jqu...

Junn
2012/12/05
0
2
9道前端面试题及答案,赶紧收藏!

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

IT智云编程
07/12
0
0
Masonry:一款很好用的jquery网页瀑布流布局插件

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等。通常,随着页面滚动...

mickelfeng
2013/05/28
0
0
小程序之图片瀑布流(最全实现方式,额外加送懒加载)

效果图 来来来,看啊看,外面的世界多好看, 效果图展示的是瀑布流布局 && 懒加载的效果 数据 图片数据来源张鑫旭的网络日志 先说下我们的图片链接格式 所有的链接都是这样的格式,我们需要改...

小心夹手
05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Call to undefined function Workerman\posix_getpid

workerman 在centos下报PHP Fatal error: Call to undefined function Workerman\posix_getpid posix在下面这个包中php-process...

dragon_tech
7分钟前
0
0
mysql 7.4 创建表 时  所建表 字段太多 导致失败

报错:[Err] 1118 - Row size too large (> 8126). Changing some columns to TEXT or BLOB may help. In current row format, BLOB prefix of 0 bytes is stored inline. 解决方法:把表的引......

qimh
10分钟前
0
0
语法补漏

1.if...elif...else... 代码示例: test=10 if test>9: print(1) elif test>8: print(2) elif test>7: print(3) else: print('nothing') 输出代码: 1...

十年磨一剑3344
10分钟前
0
0
Python -re模块及正则表达式解析

传送门: https://blog.csdn.net/pipisorry/article/details/25909899 ps:上面文章中"命名分组"的语法格式不能执行。正确的如下: (?P<name>正则表达式) #name是一个合法的标识符 除了使用别名...

一口今心
17分钟前
0
0
mybatis中session.getMapper方法源码分析

0开始代码AuthorMapper mapper = session.getMapper(AuthorMapper.class); 1 DefaultSqlSession类 @Override public <T> T getMapper(Class<T> type) { //最后会去调用MapperRegistry.getMap......

writeademo
26分钟前
1
0
spring cloud zuul网关的作用

zuul一般有两大作用,1是类似于Nginx的网址重定向,但zuul的重定向的一般是整个spring cloud里在Eureka注册中心的模块. zuul: ignored-services: '*' sensitiveHeaders: routes: ...

算法之名
26分钟前
9
0
java按比例之原图生成缩略图

package com.wxp.test; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import javax.imageio.ImageIO; import sun.......

恋码之子
36分钟前
1
0
SpringCloud 微服务 (十五) 服务容错 Hystrix

壹 工作中的微服务架构,某个服务通常会被多个服务调用或者多层调用完成需求,如果某个服务不可用,导致一个系统功能不可用或者服务直接没用了的情况,这种情况称为雪崩效应 有A服务调用B服务,B服...

___大侠
38分钟前
1
0
Spring框架中的设计模式(五)

Spring框架中的设计模式(五) 通过以前的4篇文章,我们看到Spring采用了大量的关于创建和结构方面的设计模式。本文将描述属于行为方面的两种设计模式:命令和访问者。 前传: Spring框架中的...

瑞查德-Jack
40分钟前
1
0
解决phpstorm运行很卡问题!

phpStorm一旦达到这个临界值,所有智能提示、自动补全都失效了 这TM就很尴尬了,顿时感觉自己就是个废人了,纯手写代码跟便秘一样 众所周知phpStorm基于JAVA,那么这个内存限制肯定跟JAVA的虚...

sjcehui2010
43分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部