<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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 onOff = true; ???????getList(); ???????????????function getList(){ ???????????ajax(‘get‘,‘getPics.php‘,‘cpage=‘+ipage,function(data){ ???????????var data = JSON.parse(data); ???????????if(!data){ ???????????????return; ???????????} ???????????for(var i=0;i<data.length;i++){ ???????????????????var _index = getShort(); ???????????????????var oDiv = document.createElement(‘div‘); ???????????????????var oImg = document.createElement(‘img‘); ???????????????????oImg.src = data[i].preview; ???????????????????oImg.style.width = ‘225px‘; ???????????????????oImg.style.height = ?data[i].height * ( 225 / data[i].width ) + ‘px‘; ???????????????????oDiv.appendChild(oImg); ???????????????????var oP = document.createElement(‘p‘); ???????????????????oP.innerHTML = data[i].title; ???????????????????oDiv.appendChild(oP); ???????????????????aLi[_index].appendChild(oDiv); ???????????} ???????????onOff = true; ?????????}); ???????} ???????????????/*拉动滚动条触发*/ ???????window.onscroll = function(){ ???????????var _index = getShort(); ???????????var oLi = aLi[_index]; ???????????var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; ???????????if(getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight +scrollTop ){ ???????????????if(onOff){ ???????????????????onOff = false; ???????????????????ipage++; ???????????????????getList(); ???????????????} ???????????} ???????}; ???????/*获取元素top*/ ???????function getTop(obj){ ???????????var iTop = 0; ???????????while(obj){ ???????????????iTop += obj.offsetTop; ???????????????obj = obj.offsetParent; ???????????} ???????????return iTop; ???????} ???????/*获取页面li的最短高度*/ ???????function getShort(){ ???????????var index = 0; ???????????var ih = aLi[index].offsetHeight; ???????????for(var i=1;i<iLen;i++){ ???????????????if(ih > aLi[i].offsetHeight){ ???????????????????index = i; ???????????????????ih = aLi[index].offsetHeight; ???????????????} ???????????} ???????????return index; ???????} ???};</script></head><body> ???<ul id=‘ul1‘> ???????<li></li> ???????<li></li> ???????<li></li> ???????<li></li> ???</ul></body></html>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); ???????????} ???????} ???????????}}<?phpheader(‘Content-type:text/html; charset="utf-8"‘);/*API: ???getPics.php ???????参数 ???????cpage : 获取数据的页数*/$cpage = isset($_GET[‘cpage‘]) ? $_GET[‘cpage‘] : 1;$url = ‘http://www.wookmark.com/api/json/popular?page=‘ . $cpage;$content = file_get_contents($url);$content = iconv(‘gbk‘, ‘utf-8‘, $content);//echo $content;?>
ajax 瀑布流 demo
原文地址：https://www.cnblogs.com/moon-yyl/p/9235818.html