AJAX实例--瀑布流

原创 2016年05月31日 21:06:29
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {margin: 0;}
#ul1 {width: 1080px; margin: 100px auto 0;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function() {

var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var iLen = aLi.length;
var iPage = 1;//页数
var b = true;//设置一个开关,当第一页加载完第二页才开始,依次类推

//初始化数据处理
getList();

function getList() {
ajax('get','getPics.php','cpage=' + iPage,function(data) {

var data = JSON.parse(data);//把字符串解析成JSON数组

if ( !data.length ) {
//后续没有数据了
return ;
}

for ( var i=0; i<data.length; i++ ) {

//获取高度最短的li
var _index = getShort();

var oDiv = document.createElement('div');
var oImg = document.createElement('img');
//data是通过AJAX获得得到JSON数据,从审查元素Network->Name->Preview可以查看json数据
oImg.src = data[i].preview;//json数据中图片的地址
oImg.style.width = '225px';//这里的宽度是定死的,不能用data[i].width,宽度固定,高度也要按比例缩放,否则会变形
oImg.style.height =  data[i].height * ( 225 / data[i].width ) + 'px';//高度随宽度等比例缩放,225 / data[i].width是宽的比例
oDiv.appendChild( oImg );
var oP = document.createElement('p');
oP.innerHTML = data[i].title;//json数据中图像的标题
oDiv.appendChild( oP );

aLi[_index].appendChild( oDiv );//把创建的div追加到最短的li中

}

b = true;//这一页加载完成,设置成可以下一页加载

});
}

window.onscroll = function() {

var _index = getShort();
var oLi = aLi[_index];

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//当前的top值加上自身的高小于可视区域的高+滚动条的滚动距离
if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {

if ( b ) {
b = false;//这一页正在进行中,防止加载另一页,必须一页页排队来,就像排队取钱,进去把门关上
iPage++;
getList();
}

}

}
//获得最短li,因为数据会优先选择最短的li进行添加图片
function getShort() {
var index = 0;//索引
var ih = aLi[index].offsetHeight;//索引所对应的li列表中的高度值
for (var i=1; i<iLen; i++) {
if ( aLi[i].offsetHeight < ih ) {
index = i;
ih = aLi[i].offsetHeight;
}
}
return index;
}
//获取元素到页面的绝对值
function getTop(obj) {
var iTop = 0;
while(obj) {
iTop += obj.offsetTop;
obj = obj.offsetParent;
}
return iTop;
}

}
</script>
</head>


<body>
<ul id="ul1">
    <li></li>
      <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>


ajax.js


function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

if (method == 'get' && data) {
url += '?' + data;
}

xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err:' + xhr.status);
}
}

}
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

Ajax实现瀑布流动态加载网页

瀑布流的动态加载效果是我一直以来觉得最喜欢的效果之一了。最近在工作中遇到了一个情景,当我登录到系统中时,需要向另一个系统发送多次接口查询数据,之后再将这些数据显示到页面上。这就存在了这样一个问题:页面...
  • Earl_yuan
  • Earl_yuan
  • 2015年10月14日 07:58
  • 3779

AJAX实现瀑布流布局

瀑布流是当前一种比较流行的网站界面布局方式,参差不齐的多栏布局以及到达底部自动加载的方式,使网站在视觉和用户体验上都能得到较大的提升。最早使用此布局的是国外的图片网站Pinterest,之后国内的一些...
  • sir1241
  • sir1241
  • 2016年10月18日 16:37
  • 2704

瀑布流waterfall.js插件,php+ajax动态读取数据示例

瀑布流waterfall.js插件,php+ajax动态读取数据示例 兼容IE8和Chrome浏览器
  • zyytaiyame
  • zyytaiyame
  • 2017年01月04日 16:35
  • 1281

Ajax实现瀑布流图片加载

Ajax实现瀑布流图片加载
  • u010165856
  • u010165856
  • 2016年08月22日 22:36
  • 829

AJAX+json+jquery实现预加载瀑布流布局

代码片段(1)[全屏查看所有代码] 1. [代码][JavaScript]代码     跳至 [1] [全屏预览] ? 1 2 3 4 ...
  • iso_wsy
  • iso_wsy
  • 2015年11月11日 18:04
  • 1244

利用ajax实现织梦dedecms瀑布流无限加载功能

该功能主要用到AJAX技术! 一、首先找到并打开/plus/list.php文件,在里面找到如下代码:require_once(dirname(__FILE__)."/../include/com...
  • langyu1021
  • langyu1021
  • 2016年08月24日 13:06
  • 4476

BlocksIt.js瀑布流插件结合ajax实现无限加载数据

最近无聊,搜索了网络瀑布流插件,下载了BlocksIt.js的插件,在结合ajax异步获取数据。实现滚动无限加载数据。 刚开始以为只要把append添加内容地方替换为ajax方法就可以了,结果一测试完...
  • eadio
  • eadio
  • 2015年10月10日 18:00
  • 2870

JavaScript、jQuery、css3实现瀑布流加载

实现的最终效果如下: 在实现的过程中用到的有: 1.css设置边框为圆角: border-radius: 5px; 2.创建表情并添加、嵌套: var oBox = docu...
  • u014520745
  • u014520745
  • 2016年03月03日 09:40
  • 755

瀑布流 下拉无限加载 json异步数据

无标题文档 /*这里我们添加一些CSS定义*/#w h1 { color: #fff; font-size: ...
  • Top_xin
  • Top_xin
  • 2015年03月23日 15:29
  • 8304

Android中利用RecyclerView实现瀑布流效果

RecyclerView相比于传统的ListView,功能更加强大,使用也比较方便,因此Android官方更加推荐使用RecycleView,未来也会有更多的程序逐渐从ListView转向Recycl...
  • android_cmos
  • android_cmos
  • 2017年03月10日 18:55
  • 562
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX实例--瀑布流
举报原因:
原因补充:

(最多只允许输入30个字)