jquery代码实现简单的随机图片瀑布流效果


Posted in Javascript onApril 20, 2015

为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练

代码:

<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="201405/-1.jpg" alt=""/></li>
<li><img src="201405/-2.jpg" alt=""/></li>
<li><img src="201405/-3.jpg" alt=""/></li>
</ul>
<ul class="col"></ul>
<ul class="col" style="margin-right:0"></ul>
</div>
<script type="text/javascript" src="/ajaxjs/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 = /-'
+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>
<div>https://3water.com/</div>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 Javascript
被遗忘的javascript的slice() 方法
Apr 20 #Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 #Javascript
分享10个原生JavaScript技巧
Apr 20 #Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 #Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 #Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 #Javascript
javascript中callee与caller的区别分析
Apr 20 #Javascript
You might like
php获取网页上所有链接的方法
2015/04/03 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
JSON 学习之完全手册 图文
2007/05/29 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
基于Python解密仿射密码
2019/10/21 Python
Python中url标签使用知识点总结
2020/01/16 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
Delphi笔试题
2016/11/14 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
《秋游》教学反思
2014/04/24 职场文书
一个都不能少观后感
2015/06/04 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android