邢台哪个公司做网站好,常州公司网站建设,wordpress外贸商城主题,长沙优化网站方法今天终于搞懂了瀑布流式布局#xff0c;哈哈#xff0c;总结下 瀑布流式布局分为两种类型#xff1a;1、每一列都限定宽度不限定高度的布局#xff08;使用浮动#xff09;2、宽度不是写死的#xff0c;是根据页面的放大缩小变化的#xff08;定位布局#xff09; 瀑布… 今天终于搞懂了瀑布流式布局哈哈总结下 瀑布流式布局分为两种类型1、每一列都限定宽度不限定高度的布局使用浮动2、宽度不是写死的是根据页面的放大缩小变化的定位布局 瀑布流式布局的重点是每个新加载的模块都应该显示在原有模块高度最小的下方 注意事项 图片接收到的数据在插入到文档的过程中可能会因为图片的加载速度影响Li的最小高度可以等图片加载完触发某个事件再继续加载图片还未研究出可以设置图片的相对宽高; 什么时候鼠标滚动的时候继续加载数据当最小高度的模块显示在文档可视区的时候加载后续内容需要比较模块offsetHeighttop是否小于页面滚动的距离document.creatElement.scrollTop || document.body.scrollTop 页码什么时候发出请求若想一页一页的加载数据需要设置开关限制每次请求的只有一页 html文件 bodyul idlistli/lili/lili/lili/li/ul
/body css: style typetext/css#list{width:1050px;margin: 10px auto;}#list li{width:242px;float: left;margin: 10px;}li div{border: 1px solid #999;padding: 10px;margin-bottom: 10px;}li img{display: block;width: 220px;}
/style js: script typetext/javascriptwindow.onloadfunction(){var oUldocument.getElementById(list);var aLidocument.getElementsByTagName(li);var ipage1;var btrue;getList();function getList(){ajax(GET,getPics.php,cpageipage,function(data){var dataJSON.parse(data);if(!data.length){return;}// console.log(data);for(var i0;idata.length;i){var oDivdocument.createElement(div);var oImgdocument.createElement(img);oImg.srcdata[i].preview;oImg.style.width220px;oImg.style.heightoImg.width/data[i].width*data[i].height;oDiv.appendChild(oImg);var oPdocument.createElement(p);oP.innerHTMLdata[i].title;oDiv.appendChild(oP);aLi[getShort()].appendChild(oDiv);}btrue;});}//获取高度最小的lifunction getShort(){var index0;var oLiaLi[index].offsetHeight;for(var i1;iaLi.length;i){if(aLi[i].offsetHeightoLi){indexi;oLiaLi[i].offsetHeight;}}return index;}//当鼠标滑动至最小高度的Li显示在可视区的时候页码数发生变化重新请求window.οnscrοllfunction(){var _indexgetShort();var oLiaLi[_index];var scrollTopdocument.documentElement.scrollTop || document.body.scrollTop;if(getPos(oLi).top oLi.offsetHeight document.documentElement.clientHeight scrollTop){if(b){bfalse;ipage;getList();}}}}/script 引用的js函数 function getPos(obj) {var pos {left: 0,top: 0};while(obj) {pos.left obj.offsetLeft;pos.top obj.offsetTop;obj obj.offsetParent;}return pos;
}//ajax处理过程start
function ajax(method, url, data, success) {var xhr new XMLHttpRequest();//通过GET方式传递数据if(method GET data) {url ? data;}xhr.open(method, url, true);//通过POST传递数据设置请求头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(呀出错了 xhr.status);}}}
}
//ajax处理过程end 效果显示 转载于:https://www.cnblogs.com/rain92/p/6023982.html
