瀑布流（float方式）

最新推荐文章于 2024-08-01 15:19:04 发布

chenshiforever

最新推荐文章于 2024-08-01 15:19:04 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签：瀑布流

本文链接：https://blog.csdn.net/u013962049/article/details/52154140

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML

<!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>
window.onload = function() {
    waterfall({
    id:"ul1",
    url:"getPics.php",
    async:true,
    method:"get"
});
function ajax(obj){
    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);
            console.log(xhr.responseText);
        }else{
            console.log('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
        }
    }

}


function waterfall({
    id:id,
    url:url,
    async:async,
    method:method
}){  
    var ul = document.getElementById("ul1");
    var li = ul.getElementsByTagName('li');
    var li_len = li.length;
    var page = 1;
    var b = true;
    getList();
    function getList(){
        ajax({
            method :method,
            url:url,
            data:"cpage="+ page,
            async:async,
            success:function(data){
                var data = JSON.parse(data);
                if(!data.length){
                    return;
                }
                for(var i = 0; i < data.length; i++){
                    var _index = getShort();//获取最小高度
                    var newDiv = document.createElement("div");
                    var newImg = document.createElement("img");
                    var newP = document.createElement("p");
                    newP.innerHTML = data[i].title;
                    newImg.src = data[i].preview;
                    newImg.style.width = "225px";
                    newImg.style.height = data[i].height*(225/data[i].height) + "px";
                    newDiv.appendChild(newImg);
                    newDiv.appendChild(newP);
                    li[_index].appendChild(newDiv);


                }  

                b = true;
            } 


        })

    }   
    function getShort(){
                var index = 0;
                var liHeight = li[index].offsetHeight;
                console.log(liHeight);
                for(var i = 1; i< li_len; i ++){
                    if(liHeight > li[i].offsetHeight){
                        index = i;
                        liHeight = li[i].offsetHeight;
                    }
                }
                return index;
            }
            window.onscroll = function(){

                var _index = getShort();

                var oli = li[_index];
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                if(getTop(oli) + oli.offsetHeight < document.documentElement.clientHeight + top){
                    if(b){
                        b = false;
                        page++;
                        getList();
                    }
                }
            }
            function getTop(obj){
                var top = 0;
                while(obj){
                    top += obj.offsetTop;
                    obj = obj.offsetParent;
                }
                return top;
            }

}   
}
</script>
</head>

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

PHP

<?php
header('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;

?>