瀑布流

来源：互联网发布：linux cut 编辑：程序博客网时间：2024/04/28 12:31
<!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);if ( !data.length ) {//后续没有数据了return ;}for ( var i=0; i<data.length; i++ ) {//获取高度最短的livar _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 );}b = 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 ( b ) {b = false;iPage++;getList();}}}function getShort() {var index = 0;var ih = aLi[index].offsetHeight;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>
0 0