`

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

jqueryhtmlwaterfall布局layout 
阅读更多 

<!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>
分享到：
| 使用jQuery去掉指定标签里所有文字内容对应 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery网格瀑布流布局插件.rar

    本篇文章将深入探讨一款基于jQuery的网格瀑布流布局插件，该插件名为“hjiaoben115”，并讨论其工作原理、使用方法以及如何进行二次修改，以满足个性化需求。 一、jQuery与CSS特效的融合 jQuery是一款强大的...

    waterfall瀑布流.rar

    3. **JavaScript 插件**：如jQuery Masonry、Isotope等库，它们通过JavaScript动态计算元素的位置，实现瀑布流布局。这些库通常会在页面加载或窗口尺寸改变时重新计算元素的布局，以保持最佳的显示效果。 4. **响应...

    jquery.waterfall.plugin-master.zip，jquery瀑布流插件

    瀑布流布局，也被称为Masonry...总的来说，jQuery Waterfall Plugin结合了前端技术的多个方面，包括JavaScript、CSS3、DOM操作、Ajax、响应式设计等，为开发者提供了一种便捷的方式来构建美观且高效的瀑布流布局网页。

    基于jquery的瀑布流模板

    瀑布流布局是一种常见的网页设计样式，它模仿了印刷品中的多列布局，使得网页内容能够像瀑布一样自上而下、逐列填充。在Web开发中，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。本...

    基于jquery实现瀑布流布局

    本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： 使用jquery-1.8.3.min.js，waterfall.js代码如下： $( window ).load( function(e){ ...

    waterfall 瀑布流 demo

    瀑布流布局是一种常见的网页设计模式，它以瀑布一样流淌的效果展示元素，通常用于图片展示，如Pinterest。在本示例中，"waterfall 瀑布流 demo" 是一个使用 jQuery 库实现的图片瀑布流加载效果。jQuery 是一款广泛...

    搞定 瀑布流 布局 Css Jquery

    瀑布流布局（Waterfall Layout）是一种能够自动调整容器内项目位置，以达到美观效果的布局方式。这种布局方式最早被Pinterest采用，随后迅速流行开来，成为许多网站和应用中展示图片或卡片式内容的标准布局之一。...

    jquery瀑布流效果响应式自适应手机电脑端jaliswall.js

    jaliswall.js是jQuery的一个插件，专用于创建响应式的瀑布流布局。它支持手机和电脑端，意味着无论用户使用何种设备，都能保持良好的显示效果。jaliswall.js的核心功能包括： 1. **响应式设计**：jaliswall.js能够...

    JQ 使用waterfall插件实现瀑布流

    瀑布流布局是一种常见的...总结起来，使用jQuery的waterfall插件实现瀑布流布局主要包括引入插件、初始化元素、处理滚动加载等步骤。通过灵活配置和扩展，可以创建出适应不同场景的瀑布流布局，提供优秀的用户体验。

    jquery瀑布流布局插件类似于Pinterest

    1. **源代码文件**：JavaScript文件（如`jquery.waterfall.js`）实现了瀑布流布局的逻辑。 2. **示例或演示**：可能有一个`demo.html`文件，展示了插件的使用方法和效果。 3. **CSS样式表**：`style.css`可能包含了...

    waterfall, Duitang Waterfall Woo. (堆糖瀑布流).zip

    1. **瀑布流布局**：瀑布流布局（Waterfall Layout）是一种多列布局方式，每列的高度不固定，新元素会自动填充到前一列的下方，形成一种类似瀑布下落的效果。这种布局在响应式设计中尤其受欢迎，因为它能自适应不同...

    瀑布流waterfall

    瀑布流布局，也被称为Pinterest布局或Masonry布局，是...总的来说，瀑布流布局插件"waterfall"是网页设计中实现视觉吸引力和用户友好体验的一种工具，通过jQuery库的支持，开发者可以轻松地在项目中集成这种布局方式。

    jquery实现瀑布流

    在Web开发中，jQuery是一个广泛使用的JavaScript库，它可以简化DOM操作，使得实现瀑布流布局变得更加方便。 首先，我们需要理解瀑布流布局的基本原理。瀑布流的核心是通过计算每一列的高度，将新元素插入到当前列...

    jQuery实现瀑布流滚动加载分页效果

    瀑布流布局是一种常见的网页设计模式，它以一种不规则的方式排列元素，使页面看起来像一个瀑布一样逐级下降。在JavaScript库中，jQuery是广泛使用的工具之一，它提供了丰富的API来帮助开发者实现各种动态效果。本篇...

    Jquery瀑布流插件

    瀑布流布局在视觉上具有吸引力，能提高用户体验，尤其在响应式设计中表现突出。 **jQuery** 是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery的核心特性包括选择器（用于选取...

    jquery 瀑布流 Demo

    本项目"jQuery瀑布流Demo"是基于jQuery实现的一种图片展示方案，它能够动态加载图片，即当用户滚动页面到一定位置时，新的图片会自动加载并无缝融入瀑布流布局中，这种技术被称为无限滚动或滚动加载。这种设计优化了...

    jquery版瀑布流（修改版）

    瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在展示图片或者商品时非常流行。这种布局的特点是每个元素...通过学习和理解它的实现，我们可以掌握瀑布流布局的关键技术和jQuery在页面布局中的应用。

    Jquery图片瀑布流

    在实现瀑布流布局时，jQuery用于动态加载图片、监听滚动事件以及调整元素的位置。 3. **无限滚动**（Infinite Scroll）：这是瀑布流的关键特性，允许页面在用户滚动到底部时自动加载更多内容。这通常通过监听滚动...

    jquery瀑布流插件

    将瀑布流布局与jQuery结合，可以轻松实现动态加载、响应式设计等功能，提高用户体验。 在“jQuery瀑布流插件”中，通常包含以下几个关键知识点： 1. **元素尺寸计算**：为了实现瀑布流布局，插件需要计算每个元素...

Magicbox
Global site tag (gtag.js) - Google Analytics