wf_js.html(展示页)

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
background: #f3f2f3;
}
#main {
border: 1px solid red;
width: 1225px;
margin: 0 auto;
}
.column {
width: 245px;
float: left;
}
</style>
</head> <body>
<button id="btn">加载图片</button>
<div id="main">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</body>
</html>
<script src="ajax.js"></script>
<script type="text/javascript">
//点击按钮 首先加载数据到不同的列上
var cols = document.getElementsByClassName("column");
btn.onclick = function(){
ajax( "pbl.json" , function(msg){
var arr = JSON.parse( msg );
for( var i = 0 ; i < arr.length ; i++ ){
var pro = arr[i];
var oimg = document.createElement("img");
oimg.src = pro.src;
//设置图片的宽度和高度
oimg.width = "245";
oimg.height = pro.height;
//获取最小高度列的索引
var index = getMinHeightIndex();
cols[index].appendChild( oimg );
}
} )
} ///定义一个函数 功能是获取最小高度列的下标
function getMinHeightIndex(){
//假设五列中第一列的高度是最小的
var minHeight = cols[0].offsetHeight;
var index = 0;//第一列的下标
for( var i = 0 ; i < cols.length ; i++ ){
if( minHeight > cols[i].offsetHeight ){
minHeight = cols[i].offsetHeight;
index = i;
}
}
return index;
} window.onscroll = function(){
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
//当最小高度列高 < 可视窗口高度+页面滚走的距离 时 开始加载数据
var winHeight = window.innerHeight;
var minHeight = cols[getMinHeightIndex()].offsetHeight;
if( minHeight < winHeight + sTop ){
btn.onclick();//持续加载图片
}
}
</script>

ajax.js

function ajax(url,fnWin,fnFaild){
var ajax = null;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.open("get",url,true);
ajax.send();
ajax.onreadystatechange = function (){
if (ajax.readyState==4) {
if(ajax.status == 200){
if (fnWin) { //判断该函数是否存在,如果存在,就调用 返回结果
fnWin(ajax.responseText);
}
}else{
if (fnFaild){
fnFaild();
}
}
}
}
}

pbl.json

[
{"src":"img/1.jpg","alt":"1","height":"343"},
{"src":"img/2.jpg","alt":"2","height":"300"},
{"src":"img/3.jpg","alt":"3","height":"230"},
{"src":"img/4.jpg","alt":"4","height":"230"},
{"src":"img/5.jpg","alt":"5","height":"306"},
{"src":"img/6.jpg","alt":"6","height":"333"},
{"src":"img/7.jpg","alt":"7","height":"335"},
{"src":"img/8.jpg","alt":"8","height":"172"},
{"src":"img/9.jpg","alt":"9","height":"172"},
{"src":"img/10.jpg","alt":"10","height":"345"},
{"src":"img/11.jpg","alt":"11","height":"340"},
{"src":"img/12.jpg","alt":"12","height":"153"},
{"src":"img/13.jpg","alt":"13","height":"345"},
{"src":"img/14.jpg","alt":"14","height":"316"},
{"src":"img/15.jpg","alt":"15","height":"327"},
{"src":"img/16.jpg","alt":"16","height":"345"},
{"src":"img/17.jpg","alt":"17","height":"172"},
{"src":"img/18.jpg","alt":"18","height":"282"},
{"src":"img/19.jpg","alt":"19","height":"224"},
{"src":"img/11.jpg","alt":"11","height":"340"},
{"src":"img/12.jpg","alt":"12","height":"153"},
{"src":"img/13.jpg","alt":"13","height":"345"},
{"src":"img/14.jpg","alt":"14","height":"316"},
{"src":"img/15.jpg","alt":"15","height":"327"},
{"src":"img/16.jpg","alt":"16","height":"345"},
{"src":"img/17.jpg","alt":"17","height":"172"},
{"src":"img/18.jpg","alt":"18","height":"282"},
{"src":"img/19.jpg","alt":"19","height":"224"},
{"src":"img/20.jpg","alt":"20","height":"344"}
]

瀑布流之ajax的更多相关文章

  1. 瀑布流原生ajax,demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释 img:ajax.php:demo.php 其中img中放入图片 1.jpg: ...

  2. AJAX异步实现简单的瀑布流

    传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...

  3. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

  4. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  5. [妙味Ajax]第二课:实例:留言板、瀑布流

    知识点总结 瀑布流原理(固定布局) 总宽度大小固定 每列宽度固定,比如LI,高度自动计算,每列使用float:left来布局 计算最短的一列,将Div插到最短的一列处(li里面包div)(getSho ...

  6. 服务器代理+jQuery.ajax实现图片瀑布流

    服务器代理机制破解浏览器的同源策略 瀑布流功能实现分析 具体实现代码及业务实现分析 一.服务器代理机制破解浏览器同源策略 由于浏览器的同源策略无法请求不同域名下的资源,但是服务器的后台程序并不受同源策 ...

  7. 原生ajax瀑布流demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...

  8. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  9. Ajax——瀑布流

    基本概念 1.宽度是一致的,高度上参差不齐 2.新增内容优先放置在最矮的地方 核心难点 1.用一个数组存储每列的高度值 2.新值添加到值最小索引上,每次替换更新数组 插件使用 1.$.fn.exten ...

随机推荐

  1. 对Python源码加密及反编译前后对比

    关于python的加密 目前软件开发商对 Python 加密时可能会有两种形式,一种是对python转成的exe进行 保护,另一种是直接对.py或者.pyc文件进行保护,下面将列举两种形式的保护流程. ...

  2. jenkins 的一个BUG

    最近更新了一批jenkin插件,更新完问题来了全局设置无法保存了... 报错如下 Stack trace net.sf.json.JSONException: null object at net.s ...

  3. 《Java程序设计》第一周学习记录(2)

    目录 使用JDB调试程序 系统文件被覆盖的挽救 参考资料 使用JDB调试程序 JDB是JDK自带的基于命令行的调试程序.我们先来man一下吧(说到这里,我之前在翻娄老师的博客的时候看到一篇文章:做中学 ...

  4. 如何打印一棵树(Java)

    1.有一棵多叉树,将它打印出来. import java.util.LinkedList; /** * 需求:按层打印一棵树 * 说明:树是保存在一个链表中 * created by wangjunf ...

  5. js获取微信code

    function callback(result) { alert('cucess'); alert(result); //输出openid } function getQueryString(nam ...

  6. 使用 nghttpx 搭建 HTTP/2 代理 (转)

    来自http://www.fanyue.info/2015/08/nghttpx-http2.html 使用 nghttpx 搭建 HTTP/2 代理 [转] HTTP/1.1,定义于 1999 年, ...

  7. Xcode $(SRCROOT)和$(PROJECT_DIR)区别

    $(SRCROOT)代表的时项目根目录下 $(PROJECT_DIR)代表的是整个项目 PS:往项目添加文件时,例如.a等,要先show in finder ,复制到项目中,然后再拖到xcode项目中 ...

  8. glibc源码下载

    https://www.gnu.org/software/libc/ Download sources Releases are available by source branch checkout ...

  9. C#通过RFC连接sap系统

    先理解一下 RFC(Romote Function Call)远程函数调用 调用前提: 1.要想通过C# 通过RFC调用SAP端,SAP端要存在RFC远程调用的函数才行(例如SAP端通过SE37创建) ...

  10. spring 对jdbc的简化

    spring.xml <!-- 加载属性配置文件 --> <util:properties id="db" location="classpath:db ...