jQuery实现的瀑布流效果, 向下滚动即时加载内容

下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容。

后台用 json 传输数据, 示例程序中只写了示例数组。数据也只设置了两个属性, 需根据实际应用改写。

页面用了 ul li 做为容器, 每个 li 表示一列

<ul id="stage">

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

JS代码

/*

@版本日期: 版本日期: 2012年4月11日

@著作权所有: 1024 intelligence ( http://www.1024i.com )

获得使用本类库的许可, 您必须保留著作权声明信息.

报告漏洞,意见或建议, 请联系 Lou Barnes([email protected])

*/

$(document).ready(function(){

loadMore();

});

$(window).scroll(function(){

// 当滚动到最底部以上100像素时, 加载新内容

if ($(document).height() - $(this).scrollTop() - $(this).height()<100) loadMore();

});

function loadMore()

{

$.ajax({

url : ‘data.php‘,

dataType : ‘json‘,

success : function(json)

{

if(typeof json == ‘object‘)

{

var oProduct, $row, iHeight, iTempHeight;

for(var i=0, l=json.length; i<l; i++)

{

oProduct = json[i];

// 找出当前高度最小的列, 新内容添加到该列

iHeight = -1;

$(‘#stage li‘).each(function(){

iTempHeight = Number( $(this).height() );

if(iHeight==-1 || iHeight>iTempHeight)

{

iHeight = iTempHeight;

$row = $(this);

}

});

$item = $(‘<div><img src="‘+oProduct.image+‘" border="0" ><br />‘+oProduct.title+‘</div>‘).hide();

$row.append($item);

$item.fadeIn();

}

}

}

});

}

时间: 2024-10-10 03:58:42

jQuery实现的瀑布流效果, 向下滚动即时加载内容的相关文章

jQuery+HTML5图片瀑布流效果

JavaScript与HTML5实现美女瀑布流布局,本方法是把图片的路径写在了JS的数组里,不过重点好像不是在这里,而是在图片如何自动排列的问题,你可以运行本实例后,点击“加载瀑布流布局”按钮,即可看到图片的瀑布流排列效果,现在很流行这个,希望您从本代码中能找到一些灵感. <!DOCTYPE HTML> <html> <head> <title>jQuery+HTML5图片瀑布流效果丨河北电动叉车|石家庄苗木</title> <style

页面滚动动态加载数据,页面下拉自动加载内容 jquery

<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type="text/javascript"></ script> < script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var

风行一时瀑布流网页布局,实现无限加载(jquery)

今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧 主要思路:一.根据屏幕宽度和单个浮动层的宽度来确定浮动层列数 var $boxs = $("#main>div") var boxw = $boxs.eq(0).outerWidth(); var clos = Math.floor($(window).width()/boxw); $("#main").width(boxw*clos).css('margin','0 auto'); 二.用绝对定位

一步步教你js原生瀑布流效果实现

一步步教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一张挨着一张竖直排列 4.鼠标向下滚动,一直不停的加载图片 5.浏览器的宽度改变,图片的列数会进行相应的更改 那么这种效果类似现实生活中的瀑布,所以我们叫它瀑布流的效果. Js原生瀑布流效果的实现 从上述分析中,我们可以把整个效果分为以下四个部分: html+css界面搭建 瀑布流效果 浏览器向下滚动

【前端】用jQuery实现瀑布流效果

jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格. 瀑布流的应用: 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不

用jQuery实现瀑布流效果学习笔记

jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把其中的几个函数具体记录一下. 首先,在WebStorm中新建一个工程,导入jquery库和几张img放在img文件夹下,新建html和css文件,用来搭建基本的网页结构.我们设定图片的宽度固定,高度不定,绝对定位,左浮动.这里就不细说了.我们主要讲jquery部分的知识. 这里我们讲一下我们要实现的

Jquery瀑布流效果(下篇)

接着上篇瀑布流效果说(上篇地址为http://www.cnblogs.com/jiaojiaome/articles/4123586.html). 第一个文件myself实现了瀑布流的效果,但是存在可以优化的地方. 比如initial方法,第一次刚加载的时候调用initial方法从第一张慢慢布局是没有问题的. but,后面拖动滚动后,如果满足条件,继续加载其他的,加载毕后再次调用initial()方法, 这里是可以优化的,因为之前的元素已经布局好了,不需要重新布局.所以可以从后面的元素开始 本篇

瀑布流效果的一些收获

瀑布流效果已经流行了很久,之前在项目中做了一次,今天页面改版又做了一次瀑布流的效果,中间又有了一些收获,谨记于此. 这个瀑布流效果是借鉴的网上一位大神写的代码,然后正好在项目中得到了应用. 1 function waterFall(mr, mb) { //mr水平方向的间距,mb垂直方向的间距 2 var ocontainer = document.getElementById("container"); 3 if (ocontainer) { 4 var pageWidth = oc

一种瀑布流效果的实现

最近一个项目使用到了瀑布流效果,在这里总结一下.使用jquery框架. 最终效果: 思路: 使用五个并列的div:     首次加载n条数据:     之后由scroll触发ajax数据加载:     加载每条数据时,判断5个div的高度,把数据加载到高度最短的div里. 数据加载代码: $(document).bind('scroll',(function(){     //离底部100px时触发加载     var closeToBottom = ($(window).scrollTop()