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聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
JavaScript DOM常用操作代码汇总
Jul 03 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
手写实现JS中的new
Nov 07 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程序之die调试法 快速解决错误
2009/09/17 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
javascript定时器完整实例
2015/02/10 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python3 Random模块代码详解
2017/12/04 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Python计算信息熵实例
2020/06/18 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
《长江之歌》教学反思
2014/04/17 职场文书
超越自我演讲稿
2014/05/21 职场文书
中文专业求职信
2014/06/20 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
2014年科研工作总结
2014/12/03 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
神州牡丹园的导游词
2019/11/20 职场文书