<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<title>jQuery实现无限加载瀑布流特效</title>

<style type="text/css">

/* 标签重定义 */

body{padding:0;margin:0;background:#ddd url(images/bg.jpg) repeat;}

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>

<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':'素材家园'},

　　　　{'src':'2.jpg','title':'素材家园'},

　　　　{'src':'3.jpg','title':'素材家园'},

　　　　{'src':'4.jpg','title':'素材家园'},

　　　　{'src':'5.jpg','title':'素材家园'},

　　　　{'src':'6.jpg','title':'素材家园'},

　　　　{'src':'7.jpg','title':'素材家园'},

　　　　{'src':'8.jpg','title':'素材家园'},

　　　　{'src':'9.jpg','title':'素材家园'},

　　　　{'src':'10.jpg','title':'素材家园'}

　　];

　　//设置滚动加载

　　window.onscroll = function(){

　　　　//校验数据请求

　　　　if(getCheck()){

　　　　　　var wrap = document.getElementById('wrap');

　　　　　　for(i in data){

　　　　　　　　//创建box

　　　　　　　　var box = document.createElement('div');

　　　　　　　　box.className = 'box';

　　　　　　　　wrap.appendChild(box);

　　　　　　　　//创建info

　　　　　　　　var info = document.createElement('div');

　　　　　　　　info.className = 'info';

　　　　　　　　box.appendChild(info);

　　　　　　　　//创建pic

　　　　　　　　var pic = document.createElement('div');

　　　　　　　　pic.className = 'pic';

　　　　　　　　info.appendChild(pic);

　　　　　　　　//创建img

　　　　　　　　var img = document.createElement('img');

　　　　　　　　img.src = 'images/'+data[i].src;

　　　　　　　　img.style.height = 'auto';

　　　　　　　　pic.appendChild(img);

　　　　　　　　//创建title

　　　　　　　　var title = document.createElement('div');

　　　　　　　　title.className = 'title';

　　　　　　　　info.appendChild(title);

　　　　　　　　//创建a标记

　　　　　　　　var a = document.createElement('a');

　　　　　　　　a.innerHTML = data[i].title;

　　　　　　　　title.appendChild(a);

　　　　　　}

　　　　　　PBL('wrap','box');

　　　　}

　　}

}

/**

* 瀑布流主函数

* @param wrap    [Str] 外层元素的ID

* @param box [Str] 每一个box的类名

*/

function PBL(wrap,box){

　　//    1.获得外层以及每一个box

　　var wrap = document.getElementById(wrap);

　　var boxs = getClass(wrap,box);

　　//    2.获得屏幕可显示的列数

　　var boxW = boxs[0].offsetWidth;

　　var colsNum = Math.floor(document.documentElement.clientWidth/boxW);

　　wrap.style.width = boxW*colsNum+'px';//为外层赋值宽度

　　//    3.循环出所有的box并按照瀑布流排列

　　var everyH = [];//定义一个数组存储每一列的高度

　　for (var i = 0; i < boxs.length; i++) {

　　　　if(i<colsNum){

　　　　　　everyH[i] = boxs[i].offsetHeight;

　　　　}else{

　　　　　　var minH = Math.min.apply(null,everyH);//获得最小的列的高度

　　　　　　var minIndex = getIndex(minH,everyH); //获得最小列的索引

　　　　　　getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);

　　　　　　everyH[minIndex] += boxs[i].offsetHeight;//更新最小列的高度

　　　　}

　　}

}

/**

* 获取类元素

* @param warp    [Obj] 外层

* @param 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;

}

/**

* 获取最小列的索引

* @param minH    [Num] 最小高度

* @param everyH [Arr] 所有列高度的数组

*/

function getIndex(minH,everyH){

　　for(index in everyH){

　　　　if (everyH[index] == minH ) return index;

　　}

}

/**

* 数据请求检验

*/

function getCheck(){

　　var documentH = document.documentElement.clientHeight;

　　var scrollH = document.documentElement.scrollTop || document.body.scrollTop;

　　return documentH+scrollH>=getLastH() ?true:false;

}

/**

* 获得最后一个box所在列的高度

*/

function getLastH(){

　　var wrap = document.getElementById('wrap');

　　var boxs = getClass(wrap,'box');

　　return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;

}

/**

* 设置加载样式

* @param box [obj] 设置的Box

* @param top [Num] box的top值

* @param left [Num] box的left值

* @param index [Num] box的第几个

*/

var getStartNum = 0;//设置请求加载的条数的位置

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>

</head>

<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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</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="http://www.sucaijiayuan.com">素材家园</a></div>

　　　　</div>

　　</div>

</div>

</body>

</html>

jQuery实现无限加载瀑布流特效的更多相关文章

  1. 一个无限加载瀑布流jquery实现

    实现大概是下面的效果,写了比较详细的注释 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  2. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

  3. AJAX+json+jquery实现预加载瀑布流布局

    宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...

  4. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  6. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  7. Qt实现小功能之列表无限加载

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  8. Qt实现小功能之列表无限加载（创意很不错：监听滚动条事件，到底部的时候再new QListWidgetItem）

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

  9. jQuery lazyload 懒加载

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. 转：JQuery读写Cookie

    Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术.当你浏览某网站时,你硬盘上会生产一个非常小的文本文件,它可以记录你的用户ID.密码.浏览过 ...

  2. 堆栈指针 ---delete 使用

    对拥有堆中一个有效对象的地址的指针进行删除操作的结果,是将这个堆内存的状态从“使用中” 变为“可用”(此时的可用就是指可以调用内存)释放了,可以再次覆盖此处;;     对指针内存进行删除操作后,指针 ...

  3. CEF3开发者系列之JS与C++交互之一

    JS与Native交互是相对于比较困难的技术,在学习这门技术之前,我们先了解下浏览器内核中的JS引擎与chromium内核的V8引擎相关知识.在浏览器应用中,JS与本地代码互相调用,得益于浏览器内核对 ...

  4. iOS FMDB 不需要关闭

    以前做了一个应用,里面用到了FMDB,进行每一次操作前,都open,完成操作后都close.因为我是参考他们以前的代码.程序初期没发现什么问题,程序完成后,各种卡顿就出现了!即使我是放在新线程里操作的 ...

  5. ios 关于使用异步网络请求时block回调的内存注意

    在一个controller中,使用 NSURLSessionDataTask *dataTask = [[NSURLSession sharedSession] dataTaskWithRequest ...

  6. DNS基础及域名系统架构

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...

  7. MySQL 通过idb文件恢复Innodb 数据【转】

    昨晚收到一则求助,一个用户的本地数据库的重要数据由于误操作被删除,需要进行紧急恢复,用户的数据库日常并没有进行过任何备份,binlog也没有开启,所以从备份和binlog入手已经成为不可能,咨询了丁奇 ...

  8. Maven 3.3.3 Win10环境下的使用实例（中）

    继上一篇文章介绍了Maven在Windows中的安装,本文将介绍 Maven 的核心概念. POM (Project Object Model) Maven 插件 Maven 生命周期 Maven 依 ...

  9. java中方法参数的一些总结(1)

    1.问题说明        在C++中,函数调用时有传值调用和传址调用两种方式,但在Java中只有传值调用一种方式.Java中的方法参数为那几种基本数据类型的情况跟C++中一样,传入的只是变量的拷贝. ...

  10. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...