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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
详解angular应用容器化部署
Aug 14 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
被遗忘的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网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
python能否java成为主流语言吗
2020/06/22 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
夏季奶茶店创业计划书
2014/01/16 职场文书
二年级数学教学反思
2014/01/21 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
社区活动总结报告
2014/05/05 职场文书
护士2014年终工作总结
2014/11/11 职场文书
具结保证书
2015/01/17 职场文书
员工旷工检讨书
2015/08/15 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技