一个无限加载瀑布流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 ...
随机推荐
- 【AR实验室】OpenGL ES绘制相机（OpenGL ES 1.0版本）
0x00 - 前言 之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLA ...
- 我们是怎么做Code Review的
前几天看了<Code Review 程序员的寄望与哀伤>,想到我们团队开展Code Review也有2年了,结果还算比较满意,有些经验应该可以和大家一起分享.探讨.我们为什么要推行Code ...
- C语言 · 薪水计算
问题描述 编写一个程序,计算员工的周薪.薪水的计算是以小时为单位,如果在一周的时间内,员工工作的时间不超过40 个小时,那么他/她的总收入等于工作时间乘以每小时的薪水.如果员工工作的时间在40 到50 ...
- Socket聊天程序——Common
写在前面: 上一篇记录了Socket聊天程序的客户端设计,为了记录的完整性,这里还是将Socket聊天的最后一个模块--Common模块记录一下.Common的设计如下: 功能说明: Common模块 ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 【NLP】Python NLTK处理原始文本
Python NLTK 处理原始文本 作者:白宁超 2016年11月8日22:45:44 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的一种自然语言工具包,其收集的大量公开 ...
- Linux平台 Oracle 10gR2（10.2.0.5）RAC安装 Part2：clusterware安装和升级
Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part2:clusterware安装和升级 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 3.安装Clus ...
- 创建APPID&&部署服务端教程
创建APPID&&部署服务端 一.创建APPID 1.打开https://console.developers.google.com ,左击顶部Project,然后左击创建项目 2.输 ...
- background例子
- 开源 iOS 项目分类索引大全 － 待整理
开源 iOS 项目分类索引大全 GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Cate ...