美女瀑布流-jquery代码

>首页 -> 社会专题 -> 代码效果 2016-01-16 11:55:36 来源:百度作者:佚名【大中小】浏览:615次评论:0条

网上一款流行的瀑布流效果代码，美女瀑布流，基于jquery插件实现，美女图片自动高度适应的一种布局，目前的瀑布流大多都是这种布局风格，经测试，兼容IE8浏览器，同时在火狐、Chrome、Opera、Safari下都有完美表现。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery随机图片瀑布流无限加载</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* container */
#container{width:940px;margin:50px auto;}
#container ul{width:300px;list-style:none;float:left;margin-right:20px;}
#container ul li{margin-bottom:20px;}
#container ul li img{width:300px;}
</style>
</head>
<body>
<div id="container">
<ul class="col">
	<li><img src="daima/css3yuanzhu/images/1.jpg" alt=""/></li>
	<li><img src="daima/css3yuanzhu/images/2.jpg" alt=""/></li>
	<li><img src="daima/css3yuanzhu/images/3.jpg" alt=""/></li>
</ul>
<ul class="col"></ul>
<ul class="col" style="margin-right:0"></ul>
</div>
<script type="text/javascript" src="daima/css3yuanzhu/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
	function loadMeinv(){
		var data = 0;
		for(var i=0;i<9;i++){//每次加载时模拟随机加载图片
			data = parseInt(Math.random()*9);
			var html = "";
			html = '<li><img src = daima/css3yuanzhu/images/'
					+data+'.jpg><p>src='
					+data+'.jpg</p></li>';
			$minUl = getMinUl();
			$minUl.append(html);
		}
	}
	loadMeinv();
	$(window).on("scroll",function(){
		$minUl = getMinUl();
		if($minUl.height() <= $(window).scrollTop()+$(window).height()){
		//当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
			loadMeinv();
		}
	})
	function getMinUl(){//每次获取最短的ul,将图片放到其后
		var $arrUl = $("#container .col");
		var $minUl =$arrUl.eq(0);
		$arrUl.each(function(index,elem){
			if($(elem).height()<$minUl.height()){
				$minUl = $(elem);
			}
		});
		return $minUl;
	}
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

可先修改再运行

您看到此篇文章时的感受是：

Tags：用

责任编辑：佚名

免责申明

除原创及很少部分因网文图片遗失而补存外，本站不存储任何有版权的内容。你看到的文章和信息及网址索引均由机器采集自互联网，由于时间不同，内容可能完全不同，请勿拿本网内容及网址索引用于交易及作为事实依据，仅限参考，不会自行判断者请勿接受本站信息，本网转载,并不意味着赞同其观点或证实其内容的真实性.如涉及版权等问题,请立即联系管理员,我们会予以更改或删除，保证您的权利.对使用本网站信息和服务所引起的后果,本网站不作任何承诺.

【大中小】【打印繁体投稿收藏】【推荐举报评论:0条】【关闭返回顶部】

酒精度

顶一下

上一篇：JS网页特效：星空飞入效果

下一篇：带小圆点的大屏焦点图轮播代码

密码: (新用户注册)

手机扫描

空间赞助

快速互动

有事联系

统计联系

版权与建议