一个无限加载瀑布流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 ...
随机推荐
- 从RPC开始（一）
这是一篇关于纯C++RPC框架的文章.所以,我们先看看,我们有什么? 1.一个什么都能干的C++.(前提是,你什么都干了) 2.原始的Socket接口,还是C API.还得自己去二次封装... 3.C ...
- npm 私有模块的管理使用
你可以使用 NPM 命令行工具来管理你在 NPM 仓库的私有模块代码,这使得在项目中使用公共模块变的更加方便. 开始前的工作 你需要一个 2.7.0 以上版本的 npm ,并且需要有一个可以登陆 np ...
- 闰秒导致MySQL服务器的CPU sys过高
今天,有个哥们碰到一个问题,他有一个从库,只要是启动MySQL,CPU使用率就非常高,其中sys占比也比较高,具体可见下图. 注意:他的生产环境是物理机,单个CPU,4个Core. 于是,他抓取了CP ...
- AutoMapper
什么是AutoMapper? AutoMapper是一个对象和对象间的映射器.对象与对象的映射是通过转变一种类型的输入对象为一种不同类型的输出对象工作的.让AutoMapper有意思的地方在于它提供了 ...
- 【原】AFNetworking源码阅读（五）
[原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...
- 客户端的验证插件validator
简单,智能,令人愉悦的表单验证~~~ 官方文档:http://www.niceue.com/validator/ <!DOCTYPE html> <html> <head ...
- Python应用03 使用PyQT制作视频播放器
作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/ ...
- javascript 判断参数类型大全
js 判断类型的在开发中是很常用的,因为js 是弱类型的语言,var 可以接受任何形式的类型,但是在真正的开发中,我们需要根据不同类型做不同的处理,所以这个是必须的精通. 首先需要知道 typeof这 ...
- 强强联合，Testin云测&云层天咨众测学院开课了！
Testin&云层天咨众测学院开课了! 共享经济时代,测试如何赶上大潮,利用碎片时间给女票或者自己赚点化妆品钱? 2016年12月13日,Testin联手云层天咨带领大家一起推开众测的大门 ...
- vue.js几行实现的简单的todo list
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...