文档章节

Ajax+json+jquery实现无限瀑布流布局

mengmeng1990
 mengmeng1990
发布于 2012/08/19 13:04
字数 1425
阅读 3730
收藏 9

Ajax+json+jquery实现无限瀑布流布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定宽Jquery+AJAX+JSON瀑布流布局(每行代码都有详细注释)</title>
<style type="text/css">
body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }
/*瀑布流布局样式*/
#lxf-box { position: relative; width: 1000px; margin:0 auto;}
#lxf-box li { background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; float: left;}
h3 { padding-top: 8px; }
img { width: 200px; height: auto; display: block; border: 0 }
/*css3动画 注由于是css3制作的所以兼容性不保证 要想兼容性好 请自己做成gif动画加载图*/
/*li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }*/
#loading { display:none; line-height: 30px; background: #000; color:#fff; text-align: center; height: 30px; width: 100%; position:fixed; bottom:0; opacity:0.8;}
</style>
<script src="http://www.iiwnet.com/templets/niu/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1 color="red">预览无效果请刷新</h1>
<ul id="lxf-box">
  <li><a href="http://www.iiwnet.com/div_css/342.html"><img src="http://www.iiwnet.com/uploads/allimg/120814/1-120Q411544TX.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/ajax/237.html"><img src="http://www.iiwnet.com/uploads/allimg/120801/1-120P1223013157.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/js_ad/271.html/"><img src="http://www.iiwnet.com/uploads/allimg/120808/1-120PP00915a2.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/js_texiao/312.html/"><img src="http://www.iiwnet.com/uploads/allimg/120812/1-120Q2150022G8.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/js_pic/191.html/"><img src="http://www.iiwnet.com/uploads/allimg/120722/1-120H2144003129.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/js_pic/318.html/"><img src="http://www.iiwnet.com/uploads/allimg/120812/1-120Q2161941b2.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/341.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/1-120Q4113240U2.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/350.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/125411K11-2.png"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/350.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/1254113249-12.png"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/349.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/12500a292-1.png"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/php_base/336.html/"><img src="http://www.iiwnet.com/uploads/allimg/120813/1-120Q3145U0938.jpg"></a>
    <h3>图片标题</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/344.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/12353B521-0.jpg"></a>
    <h3>图片标题</h3>
  </li>
</ul>
<div id="loading">正在加载……</div>
<script>
/*
原理:1.把所有的li的高度值放到数组里面
     2.第一行的top都为0
	 3.计算高度值最小的值是哪个li
	 4.把接下来的li放到那个li的下面
<a href="http://iiwnet.com/js_web/">网页特效代码</a>:http://iiwnet.com
编写时间:2012年6月9日
*/

function iiwnet(){//定义成函数便于调用
var wrap = document.getElementById("lxf-box")
var margin = 10;//这里设置间距
var li=$("li");//这里是区块名称
var	li_W = li[0].offsetWidth+margin;//取区块的实际宽度(包含间距,这里使用源生的offsetWidth函数,不适用jQuery的width()函数是因为它不能取得实际宽度,例如元素内有pandding就不行了)
var h=[];//记录区块高度的数组
    li.css("position","absolute");
	var n = wrap.offsetWidth/li_W|0;//容器的宽度除以区块宽度就是一行能放几个区块
	for(var i = 0;i < li.length;i++) {//有多少个li就循环多少次
		li_H = li[i].offsetHeight;//获取每个li的高度
		if(i < n) {//n是一行最多的li,所以小于n就是第一行了
			h[i]=li_H;//把每个li放到数组里面
			li.eq(i).css("top",0);//第一行的Li的top值为0
			li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度
			}
		else{
			min_H =Math.min.apply(null,h) ;//取得数组中的最小值,区块中高度值最小的那个
			minKey = getarraykey(h, min_H);//最小的值对应的指针
			h[minKey] += li_H+margin ;//加上新高度后更新高度值
			li.eq(i).css("top",min_H+margin);//先得到高度最小的Li,然后把接下来的li放到它的下面
			li.eq(i).css("left",minKey * li_W);	//第i个li的左坐标就是i*li的宽度
		}
		$("h3").eq(i).text("编号:"+i+",高度:"+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面
		$("li").animate({opacity:1});
	}
}
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/*这里一定要用onload,因为图片不加载完就不知道高度值*/
window.onload = function() {iiwnet();};
/*浏览器窗口改变时也运行函数*/
window.onresize = function() {iiwnet();};

/**********************************************************************/
/*无限加载*/
var i=1;
function getMore(){
	$("#loading").show();	
	var json = "http://www.iiwnet.com/images/jstx/img.js";
		$.getJSON(json, function(data){	
				$.each(data,function(i){
				var url=data[i].url;	
				var html="<li style='opacity:0'><a href='http://www.iiwnet.com/'><img src="+url+" ></a><h3>图片标题</h3></li>";		
			$("#lxf-box").append(html);		
					$("#loading").hide();
				});
				iiwnet();
				i=1
		});
	};
	/*滚动到底部的时候*/
	 $(window).bind("scroll",function(){
	if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 && i==1) {
		i=0;
		getMore();
		
		}
	 });
</script>
</body>
</html><p>
<!--ad-->
<script type="text/javascript">/*640*60,创建于2012-8-8*/ var cpro_id = 'u1015696';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
</p>
								<p align="center"><font color=red>如果运行效果无非显示请点击【刷新页面】</font><br/>【<a href="http://www.iiwnet.com" target="_blank"><font color="#666666">返回首页</font></a>】【<a href="javascript:this.location.reload()"><font color="#666666">刷新本页</font></a>】【<a href="javascript:window.scroll(0,0)"><font color="#666666">返回顶部</font></a>】【<a href="javascript:window.close()"><font color="#666666">关闭本页</font></a>】</p><p align="center">爱微网--有爱、爱细节、爱分享 | 打造最好的PHP学习PHP技巧PHP学习资料教程CSS布局JS特效代码学习网</p>

Ajax+json+jquery实现无限瀑布流布局 宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用css3制作的 在ff等支持css3可以显示

© 著作权归作者所有

mengmeng1990
粉丝 3
博文 1
码字总数 1425
作品 0
荆州
私信 提问
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼
2016/11/13
0
0
响应式布局页面之瀑布流布局浅析

瀑布流式布局(简称瀑布流)最先在网站上应用 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网等页面都采用了这种布局。那么什么是瀑布流呢?瀑布流的好处在哪? 瀑布流...

H_J
2014/03/14
1K
0
瀑布流布局与木桶布局

瀑布流布局 在瀑布流布局中,每一个元素的宽度相同,高度不同,下图中的数字表示图片被添加的顺序,每次添加新的图片时,都将其放在高度最小的一栏,以保证每一栏的高度尽可能相近。 思路 假...

_Dot大师兄
2017/09/20
0
0
小程序之图片瀑布流(最全实现方式,额外加送懒加载)

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

小心夹手
2018/05/11
0
0
iOS开发-UICollectionView实现瀑布流

关于瀑布流的实现网上有很多种解法,自定义控件,TableView+ScrollView,UICollectionView是iOS6发布之后用于展示集合视图,算起来已经发布三年左右了,不过知识点是不变的,集合视图提供了一...

Daniel_s
2015/12/09
105
0

没有更多内容

加载失败,请刷新页面

加载更多

黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
3
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
3
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
4
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
6
0
Vue核心概念及特性 (一)

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 > 特点: 易用,灵活,高效,渐进式框架。 > 可以随意组合需要用到的模块 vue + components + vue-router + vuex + v...

前端优选
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部