js结合jquery实现的ajax瀑布流加载实例

一.js代码
ajax函数

//瀑布流数据
var getData = function (i,url,name){$.post(url,{p:i},function(data){if(data.status){if(data.list !==null) {$(name).before(data.list), $(name).val(data.page);}}else{alert(data.info);}});
}

前台代码

$(document).ready(function (){var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)var nScrollTop = 0;   //滚动到的当前位置var nDivHight = $("#masonry").height();//获取单个div元素的滚动条 这里如果需要获取窗口的滚动条的话，修改获取的滚动高度即可。$("#masonry").scroll(function(){nScrollHight = $(this)[0].scrollHeight;nScrollTop = $(this)[0].scrollTop;if(nScrollTop + nDivHight >= nScrollHight){var page = $("#masonry_page").val();getData(page,"/masonry/id/2","#masonry_page");}});});

html代码

<div id="masonry"><input type="hidden" id="masonry_page" value="1">
</div>

注释：后台代码自行书写吧，类似分页的实现方式比较简单，后台输出html的代码，前台直接接受并添加（json数据）。

分享：在这里博主给大家推荐一个账号管理工具了，如果有朋友账号太多，经常忘记密码，而且密码太过复杂记不住，那么你有福了。在这里给大家推荐一个网站 51PassWord，博主也在用，希望能够帮助到大家。

js结合jquery实现的ajax瀑布流加载实例相关推荐

ajax瀑布流加载重叠,使用瀑布流插件masonry，图片未加载完就会出现重叠现象，怎么解决？...
//使用了imagesLoaded插件来判断图片是否加载完毕 var $grid = $('ul#grid'); $grid.imagesLoaded().done( function(instanc ...
js图片加载效果（延迟加载+瀑布流加载）
概述两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果详细代码下载:http://www.demodash ...
照片墙瀑布流加载与阻止加载
网上大部分主流的瀑布流应用基本都是由后端在提供图片地址的同时提供图片宽高,这样,前端不必等待图片渲染完成,可以根据图片的宽高先把装载图片的容器或父节点先放上页面,完成基础性的布局,再让图片以渐变或其他 ...
微信小程序--瀑布流加载
本文主要介绍小程序的瀑布流加载.实现的原理是,通过bindload监听图片加载,然后计算每张图片的高度,将list根据高度分别,创建2个新数组col1.col2. 1..xml <view cl ...
图片瀑布流加载和购物车
图片瀑布流加载注释中为详细注释动态添加元素 // 创建图片数组方便后续添加图片路径时使用var img = ["1.jpg", "2.jpg", " ...
响应式瀑布流加载更多
演示https://infinite-scroll.com/demo/masonry/ <!doctype html> <html lang="en" class ...
Masonry系列之网格瀑布流加载动画特效
文章の目录一.引入js 二.向元素添加 data-masonry 属性,选项可以被设置成 JSON 三.初始化四.项目效果写在最后 Masonry 一.引入js <script src=& ...
新手教程：不写JS，在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的加速原理除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
ajax瀑布流插件,jQuery瀑布流无限加载插件：jquery.falless.js
慌慌张张,匆匆忙忙,为何生活总是这样? 难道说,我的理想,就是这样度过一生的时光?........... 真的是一年一年飞逝而去,而人的一生,又有几个一年? 第一个四年即将结束,得到了什么?又失去了什 ...

js结合jquery实现的ajax瀑布流加载实例

js结合jquery实现的ajax瀑布流加载实例相关推荐

最新文章

热门文章