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 相关文章推荐
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
浅谈json_encode用法
2015/03/05 PHP
js的写法基础分析
2011/01/17 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
python 数据加密代码
2008/12/24 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python学习教程之使用py2exe打包
2017/09/24 Python
如何利用python查找电脑文件
2018/04/27 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
django最快程序开发流程详解
2019/07/19 Python
Pytorch之finetune使用详解
2020/01/18 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
学校司机岗位职责
2013/11/14 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
致运动员的广播稿
2015/08/19 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
Python中如何处理常见报错
2022/01/18 Python