瀑布流之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 ...
随机推荐
- 这可能是由于 CredSSP 加密 Oracle 修正。
1.Win+R 输入regedit打开注册表 找到对应的以下目录 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Polici ...
- Java Script的用途(简介)
1.可以用来写入HTML输出 <script> document.write("<h1>This is a heading</h1>");//标 ...
- vue proxyTable 跨域问题。
- 如何解决gerrit代码冲突
日常开发中,我们存在多人开发和同一个人提交多次记录的情况,这就避免不了代码冲突的情况出现. 下面介绍几种gerrit提交失败的现象,后续会根据大家遇到的情况,持续更新. 注意:出现合入不了,显示“ca ...
- 基于jquery ajax的多文件上传进度条
效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...
- js多个异步请求，按顺序执行next
在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺 ...
- 如何学Python
如何学习Python? Python上手很容易, 基本有其他语言编程经验的人可以在1周内学会Python最基本的内容.它们包括:1.常用内置类型(int, float, bool, bytes, st ...
- 一个站点配置多个App.config
一个项目一般都只有一个配置文件.web项目中用的是web.config,但项目中有时候需要单独来配置一个文件.比如:app.config,那是否可以呢? 答案是可以的.可以在web.config中指定 ...
- LeetCode71.简化路径
给定一个文档 (Unix-style) 的完全路径,请进行路径简化. 例如,path = "/home/", => "/home"path = " ...
- C# Mongo Client 2.4.2创建索引
static async Task CreateIndex() { var client = new MongoClient(); var database = client.GetDatabase( ...