瀑布流（position方式）

来源：互联网发布：淘宝评价修改步骤编辑：程序博客网时间：2024/05/29 07:44

直接贴源码

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>瀑布流</title>    <style type="text/css">    * {    margin: 0;    padding: 0;}#container {    position: relative;}.box {    padding:5px;    float: left;}.border_img {    border: 1px solid #ccc;    border-radius:5px;    box-shadow:0 0 5px #ccc;    padding: 5px;}    .border_img img {        width: 190px;        height:auto;    }    </style>   <script type="text/javascript">waterfall({    url:"getPics.php",    async:true,    method:"get"});function ajax(obj){//封装的ajax    var xhr = (function(){        if(typeof XMLHttpRequest != "undefined"){            return new XMLHttpRequest();        } else if(typeof ActiveXObject != "undefined"){            var version = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'];            for(var i = 0; i < version.length; i++){                try{                    return new ActiveXObject(version[i]);                } catch(e){                }            }        } else {            throw("您的浏览器不支持XHR对象！");        }    })()    obj.url = obj.url +"?rand="+ Math.random();    if(obj.method === "get") obj.url += obj.url.indexOf("?") == -1 ? "?"+ obj.data : "&" + obj.data;    if(obj.async === true){        xhr.onreadystatechange =function(){            if(xhr.readyState == 4){                callback();            }        }    }    xhr.open(obj.method,obj.url,obj.async);    if(obj.method === "post"){        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencode");        xhr.send(obj.data);    }else{        xhr.send(null);    }    if(obj.async === false){        callback();    }    function callback(){        if(xhr.status == 200){            obj.success(xhr.responseText);        }else{            console.log('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);        }    }}function waterfall({    url:url,    async:async,    method:method}){      var page = 1;    var b = true;    getList();    function getList(){        ajax({            method :method,            url:url,            data:"cpage="+ page,            async:async,            success:function(data){                 var imgData = JSON.parse(data);                if(!imgData.length){                    return;                }             var containerDiv = document.getElementById("container");//获取id=“container”的div            for (var i = 0; i < imgData.length; i++) {//创建div节点                var boxDiv = document.createElement("div");//动态创建div标签                boxDiv.style.height = imgData.height/imgData.width*boxDiv.style.width;                boxDiv.className = "box";//动态设置div的class="box"                containerDiv.appendChild(boxDiv);//动态添加containerDiv子节点                var borderImgDiv = document.createElement("div");//动态创建div标签                borderImgDiv.className = "border_img";//动态设置div的class="border_img"                boxDiv.appendChild(borderImgDiv);//动态添加boxDiv子节点                var boxImg = document.createElement("img");//动态创建img标签                boxImg.src =imgData[i].preview;                borderImgDiv.appendChild(boxImg);//动态添加boxDiv子节点            }            onloadImages("container", "box");                  b = true;            }          })    }   window.onscroll = function () {    if (dongtaitianjia("container", "box")) {      if(b){                b = false;                page++;                getList();            }    }}//判断是否要加载内容function dongtaitianjia(parent, box) {    var containerChilder = document.getElementById(parent);//获取container下的集合    var boxList = containerChilder.getElementsByClassName(box);//获取所有的.box集合    var lastBoxOffsetTop = boxList[boxList.length - 1].offsetTop;//最后一个.box集合元素的offsetTop    var pingmuHeight = document.documentElement.clientHeight || document.body.clientHeight;//内容区的高度    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;//滚动的高度    if (lastBoxOffsetTop < pingmuHeight + scrollHeight) {        return true;    }    else {        return false;    }}function onloadImages(parent, box) {    var containerChilder = document.getElementById(parent);//获取container下的集合    var boxList = containerChilder.getElementsByClassName(box);//获取所有的.box集合    var num = Math.floor(document.documentElement.clientWidth / boxList[0].offsetWidth);//得到一行能放几张图片    containerChilder.style.cssText = "width:" + num * boxList[0].offsetWidth + "px;margin:0 auto;"//设置宽度，居中    var boxHeightArray = [];//第一行.box集合高度的集合    for (var i = 0; i < boxList.length; i++) {        if (i < num) {            boxHeightArray.push(boxList[i].offsetHeight);//第一行.box的高度集合        }        else {            var minArrayHeight = Math.min.apply(null, boxHeightArray);//获取集合中的最小值，也就是高度最小的那个            var minHeightIndex = getMinHeightArray(boxHeightArray, minArrayHeight);//获取高度最小的那个.box集合位置            boxList[i].style.position = "absolute";//设置绝对定位            boxList[i].style.left = boxList[minHeightIndex].offsetLeft + "px";            boxList[i].style.top = minArrayHeight + "px";            console.log(boxList[i].offsetHeight);            boxHeightArray[minHeightIndex] = boxHeightArray[minHeightIndex] + boxList[i].offsetHeight;//把集合中最矮的加上放在下面的元素的高度，避免所有的元素都挤在一起        }    }}//获取高度最小的那个.box集合位置function getMinHeightArray(array, minHeight) {    for (var i = 0; i < array.length; i++) {        if (array[i] == minHeight) {            return i;        }    }}}</script></head><body>    <div id="container">    </div></body></html>

PHP

<?phpheader('Content-type:text/html; charset="utf-8"');$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;?>

0 0