瀑布流布局原理 - Newbie_小白

瀑布流布局原理

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 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++) {

            //获取高度最短的li
            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);

        }

        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>

result：

posted on 2016-05-30 19:31 Newbie_小白阅读(419) 评论(0) 编辑收藏举报