一个无限加载瀑布流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实验室】ARToolKit之概述篇
0x00 - 前言 我从去年就开始对AR(Augmented Reality)技术比较关注,但是去年AR行业一直处于偶尔发声的状态,丝毫没有其"异姓同名"的兄弟VR(Virtual ...
- 再谈CAAnimation动画
CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...
- 80 端口被占用 pid=4
80端口被pid=4的系统进程给占用的解决方法: 一般开发的时候我们都会安装sqlserver ,也会把Sql server Reporting Services 安装上去.原因就是这个服务占用了80 ...
- Android性能优化之利用LeakCanary检测内存泄漏及解决办法
前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...
- [C#] 剖析 AssemblyInfo.cs - 了解常用的特性 Attribute
剖析 AssemblyInfo.cs - 了解常用的特性 Attribute [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5944391.html 序 ...
- iOS逆向工程之Reveal工具的安装、配置与使用
今天博客内容比较简单,不过还是蛮重要的.经常有小伙伴在QQ上私下问我,说博客中是如何使用Reveal查看AppStore中下载应用的UI层级的,那么就在今天这篇博客中作为一个主题来统一的介绍一下吧.虽 ...
- .NET CoreCLR开发人员指南(上)
1.为什么每一个CLR开发人员都需要读这篇文章 和所有的其他的大型代码库相比,CLR代码库有很多而且比较成熟的代码调试工具去检测BUG.对于程序员来说,理解这些规则和习惯写法非常的重要. 这篇文章让所 ...
- js callee,caller学习
原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...
- PMON failed to acquire latch, see PMON dump
前几天,一台Oracle数据库(Oracle Database 10g Release 10.2.0.4.0 - 64bit Production)监控出现"PMON failed to a ...
- Linux下高cpu解决方案
昨天搞定了一个十万火急的issue,客户抱怨产品升级后系统会变慢和CPU使用率相当高,客户脾气很大,声称不尽快解决这个问题就退货,弄得我们 R&D压力很大,解决这个issue的任务分给了我,客 ...