瀑布流之ajax
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的更多相关文章
- 瀑布流原生ajax，demo
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释 img:ajax.php:demo.php 其中img中放入图片 1.jpg: ...
- AJAX异步实现简单的瀑布流
传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
- Masonry + Ajax 实现无限刷新瀑布流
效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...
- [妙味Ajax]第二课：实例：留言板、瀑布流
知识点总结 瀑布流原理(固定布局) 总宽度大小固定 每列宽度固定,比如LI,高度自动计算,每列使用float:left来布局 计算最短的一列,将Div插到最短的一列处(li里面包div)(getSho ...
- 服务器代理+jQuery.ajax实现图片瀑布流
服务器代理机制破解浏览器的同源策略 瀑布流功能实现分析 具体实现代码及业务实现分析 一.服务器代理机制破解浏览器同源策略 由于浏览器的同源策略无法请求不同域名下的资源,但是服务器的后台程序并不受同源策 ...
- 原生ajax瀑布流demo
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- Ajax——瀑布流
基本概念 1.宽度是一致的,高度上参差不齐 2.新增内容优先放置在最矮的地方 核心难点 1.用一个数组存储每列的高度值 2.新值添加到值最小索引上,每次替换更新数组 插件使用 1.$.fn.exten ...
随机推荐
- Linux系统启动和内核管理
Linux组成 由 kernel 和 rootfs 组成 单内核:(进程管理,内存管理,网络管理, 驱动程序,文件系统, 安全功能) /boot/vmlinuz-VERSION-release 辅助的 ...
- axios封装异步获取数据的函数以及全局拦截
https://www.cnblogs.com/momozjm/p/7273272.html https://www.jianshu.com/p/9a1b99cd2ba6
- Request实例
Request常用方法 getRequestURL方法返回客户端发出请求时的完整URL. getRequestURI方法返回请求行中的资源名部分. getQueryString 方法返回 ...
- linux 标准输入输出 重定向
背景: 屏幕打印不一定都是从标准输出来的,也包括标准错误输出流stderr中的信息 文件描述符定义(系统定义了12个) 0 标准输入 1 标准输出 2 标准错误 0 默认键盘输入 1,2默认从屏幕 ...
- mx:Label （标签）
0. <mx:Label x="139.5" y="55" text="Hello,World!" width="125&q ...
- sqli-labs(二)
第二关:sqli-labs的第二关是有报错信息的int类型的sql注入,输入id=1'后也会报错,如下图 可以看到报错信息种显示的是'' limit 0,1' 这处有错,其中前后两个单引符号是报错信 ...
- LeetCode8.字符串转整数（atoi）
题目链接:https://leetcode-cn.com/problems/string-to-integer-atoi/ 实现 atoi,将字符串转为整数. 该函数首先根据需要丢弃任意多的空格字符, ...
- JavaScript-switch-case运用-案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jar包的读取
昨天在做项目插件的时候,因为会用到jar包中的一个文件来初始化程序.并且以后还是会访问这个文件,所以就想到干脆吧文件拷贝到指定目录.在拷贝的时候也费了好一会时间,这里涉及到了jar文件的操作,在这里记 ...
- EL的隐含对象（一）【页面上下文对象】
页面上下文对象为pageContext,用于访问JSP内置对象(例如:request.response.out.session.exception.page等)和ServletContext.在获取到 ...