一个无限加载瀑布流jquery实现
实现大概是下面的效果，写了比较详细的注释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body{padding:0;margin:0;}
img{border:none;}
a{text-decoration:none;color:#444;}
a:hover{color:#999;}
#title{width:600px;margin:20px auto;text-align:center;}
@-webkit-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-moz-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-ms-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@-o-keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
@keyframes shade{
from{opacity:1;}
15%{opacity:0.4;}
to{opacity:1;}
}
/* wrap */
#wrap{width:auto;height:auto;margin:0 auto;position:relative;}
#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
#wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
#wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}
#wrap .box .info .pic:hover{
-webkit-animation:shade 3s ease-in-out 1;
-moz-animation:shade 3s ease-in-out 1;
-ms-animation:shade 3s ease-in-out 1;
-o-animation:shade 3s ease-in-out 1;
animation:shade 3s ease-in-out 1;
}
#wrap .box .info .pic img{width:260px;border-radius:3px;}
#wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
</style>
<body>
<div id="wrap">
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/1.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/2.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/3.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/4.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/5.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/6.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/7.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/8.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/9.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="data:images/10.jpg"></div>
<div class="title"><a href="#">waterfall</a></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript">
window.onload = function(){
PBL('wrap','box');
var data = [
{'src':'1.jpg','title':'waterfall'},
{'src':'2.jpg','title':'waterfall'},
{'src':'3.jpg','title':'waterfall'},
{'src':'4.jpg','title':'waterfall'},
{'src':'5.jpg','title':'waterfall'},
{'src':'6.jpg','title':'waterfall'},
{'src':'7.jpg','title':'waterfall'},
{'src':'8.jpg','title':'waterfall'},
{'src':'9.jpg','title':'waterfall'},
{'src':'10.jpg','title':'waterfall'}
];
window.onscroll = function(){
if(getCheck()){
var wrap = document.getElementById('wrap');
for(i in data){
//create a new box
var box = document.createElement('div');
box.className = 'box';
wrap.appendChild(box);
//create info and append to box
var info = document.createElement('div');
info.className = 'info';
box.appendChild(info);
//create pic div and append to info
var pic = document.createElement('div');
pic.className = 'pic';
info.appendChild(pic);
//create img element and set it' source
var img = document.createElement('img');
img.src = 'images/'+data[i].src;
// img.src = data[i].src;
img.style.height = 'auto';
pic.appendChild(img);
//create title
var title = document.createElement('div');
title.className = 'title';
info.appendChild(title);
//create anchor
var a = document.createElement('a');
a.innerHTML = data[i].title;
title.appendChild(a);
}
PBL('wrap','box');
}
}
}
function PBL(wrap,box){
// 1.get elements
var wrap = document.getElementById(wrap);
var boxs = getClass(wrap,box);
// 2.get width of info
var boxW = boxs[2].offsetWidth;
console.log(boxW)
//get colunm number so we can know how many pics can place
var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
wrap.style.width = boxW*colsNum+'px';//set the total width
// 3.create an array to
var everyH = [];//create an array to store the height of box
for (var i = 0; i < boxs.length; i++) {
if(i<colsNum){//when the first row are not filled
everyH[i] = boxs[i].offsetHeight;
}else{
var minH = Math.min.apply(null,everyH);//get the min width in array
var minIndex = getIndex(minH,everyH); //get the index of min width box
getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);//place the new box
everyH[minIndex] += boxs[i].offsetHeight;//¸the height of minIndex box now aquired the new box
}
}
}
/**
* a method to get class
* warp [Obj] Íâ²ã
* className [Str] ˈ̞
*/
function getClass(wrap,className){
var obj = wrap.getElementsByTagName('*');
var arr = [];
for(var i=0;i<obj.length;i++){
if(obj[i].className == className){
arr.push(obj[i]);
}
}
return arr;
}
/**
get the index of min height box
*/
function getIndex(minH,everyH){
for(index in everyH){
if (everyH[index] == minH ) return index;
}
}
/**
* check if the scrolled over the last box
*/
function getCheck(){
var documentH = document.documentElement.clientHeight;
var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
return documentH+scrollH>=getLastH() ?true:false;
// the last pic should be a little bit longer so can work when first ten pic onload complete
}
/**
* get the height of last box
*/
function getLastH(){
var wrap = document.getElementById('wrap');
var boxs = getClass(wrap,'box');
return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
}
/**
* method to place the new box
* box [obj]
* top [Num]
* left [Num]
* index [Num]
*/
var getStartNum = 0;//
//set the style of new box
function getStyle(box,top,left,index){
if (getStartNum>=index) return;
$(box).css({
'position':'absolute',
'top':top,
"left":left,
"opacity":"0"
});
$(box).stop().animate({
"opacity":"1"
},999);
getStartNum = index;//¸
}
</script>
</body>
</html>
一个无限加载瀑布流jquery实现的更多相关文章
- jQuery实现无限加载瀑布流特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览 源码下载 实 ...
- Vue中实现一个无限加载列表
参考 https://www.jianshu.com/p/0a3aebd63a14 一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> < ...
- AJAX+json+jquery实现预加载瀑布流布局
宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- Qt实现小功能之列表无限加载
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- Qt实现小功能之列表无限加载（创意很不错：监听滚动条事件，到底部的时候再new QListWidgetItem）
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
- JS实现-页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...
- Vue.js 开发实践：实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
随机推荐
- 【小程序分享篇 一 】开发了个JAVA小程序， 用于清除内存卡或者U盘里的垃圾文件非常有用
有一种场景, 手机内存卡空间被用光了,但又不知道哪个文件占用了太大,一个个文件夹去找又太麻烦,所以我开发了个小程序把手机所有文件(包括路径下所有层次子文件夹下的文件)进行一个排序,这样你就可以找出哪个 ...
- 深入理解C#
简单认识.NET框架 (1)首先我们得知道 .NET框架具有两个主要组件:公共语言进行时CLR(Common Language Runtime)和框架类库FCL(Framework Class ...
- 在Linux系统下运行微信Web开发者工具
微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折. 注:带 * 的步骤或文件为不确定是否管用的步骤或文件.本人系统为Linux ...
- java使用websocket，并且获取HttpSession，源码分析
转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/6238826.html 一:本文使用范围 此文不仅仅局限于spring boot,普通的sprin ...
- Web开发安全之文件上传安全
很长一段时间像我这种菜鸡搞一个网站第一时间反应就是找上传,找上传.借此机会把文件上传的安全问题总结一下. 首先看一下DVWA给出的Impossible级别的完整代码: <?php if( iss ...
- 使用apache自带日志分割模块rotatelogs，分割日志
rotatelogs 是 Apache 2.2 中自带的管道日志程序,参数如下(参见:http://lamp.linux.gov.cn/Apache/ApacheMenu/programs/rotat ...
- Github使(zhuang)用(bi)指南
本文针对未能熟练使用GitHub的人员,旨在为其指明通往新世界的小路. 一些闲话可以无视 在这个开源的时代,可能你听说过GitHub,知道大概是个什么.但是,你要是不能熟练的玩起来,怎么和大神取经,怎 ...
- 分享MSSQL、MySql、Oracle的大数据批量导入方法及编程手法细节
1:MSSQL SQL语法篇: BULK INSERT [ database_name . [ schema_name ] . | schema_name . ] [ table_name | vie ...
- 最新Linux部署.NET,Mono and DNX
这几天一直在折腾在Linux下的ASP.NET 5,就下在看来在其它操作系统中ASP.NET 5或.NET应用,要想在完整的MS VM(CoreCLR)上运行还不远远达不到,应用的效果. 目前只能在M ...
- iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开发汇总
--系统应用与系统服务 iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用 ...