ajax和js实现瀑布流布局

2017-09-29 19:31:38来源:CSDN作者:sinat_25017107人点击

分享

所谓的瀑布流布局就是浏览器上滑可以加载更多图片(其实是假数据),代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        #container{            margin: 0 auto;            /*width: 1204px;*/            position: relative;        }        .box{            padding: 5px;            float: left;            background-color: pink;        }        .box .box_img{            padding: 5px;            border: 1px solid palevioletred;            -webkit-border-radius: 5px;            -moz-border-radius: 5px;            border-radius: 5px;        }        .box img{            width: 150px;        }    </style></head><body><script>    window.onload = function () {        var boxArr = document.getElementsByClassName('box');        var container = document.getElementById('container');        var boxHeightArr = [];//        console.log(box.offsetWidth);        // 判断什么时候加载数据        function checkFlag(boxHeightArr) {            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);//            console.log(scrollTop);            var pageHeight = Math.max(document.documentElement.clientHeight, document.body.clientHeight);//            console.log(pageHeight);            if (scrollTop + pageHeight > Math.min.apply(null, boxHeightArr)) {                return true;            }        }        //求出最矮盒子对应的索引函数        function getMinHeightIndex(arr, minHeight) {            for (var index = 0; index < arr.length; index++) {                if (arr[index] === minHeight) {                    return index;                }            }        }        function imgLocation(container, content, boxHeightArr) {            var clientWidth = document.documentElement.clientWidth;            var boxWidth = content[0].offsetWidth;            //floor 求一个小于但最接近它的整数            var cols = Math.floor(clientWidth / boxWidth);//            console.log(cols);            container.style.width = boxWidth * cols + "px";            for (var i = 0; i < content.length; i++) {                var boxHeight = content[i].offsetHeight;                if (i < cols) {                    //在这里创建一个数组                    //让这个数组存储第一排 ,每个盒子的高度                    boxHeightArr[i] = boxHeight;                } else {                    //求出最矮的盒子高度                    var minBoxHeight = Math.min.apply(this, boxHeightArr);                    //求出最矮盒子对应的索引                    var minBoxIndex = getMinHeightIndex(boxHeightArr, minBoxHeight);                    //盒子瀑布流定位  顶部间距就是最矮盒子的高度                    content[i].style.position = 'absolute';                    content[i].style.top = minBoxHeight + 'px';                    content[i].style.left = minBoxIndex * boxWidth + 'px';                    //关键:更新数组最矮高度,使下一个图片在高度数组中总是找最矮高度的图片下面拼接                    boxHeightArr[minBoxIndex] += boxHeight;                }            }        }        imgLocation(container, boxArr, boxHeightArr);        // 数据通过ajax请求获得, 获得的数据如下        window.onscroll = function () {            if(checkFlag(boxHeightArr)){                console.log("现在可以加载数据了");                var imgData = {                    "data" :[{"src" : "1.jpg"},{"src" : "2.jpg"},{"src" : "3.jpg"},{"src" : "8.jpg"},{"src" : "6.jpg"}]                };                var data = imgData.data;                for(let item of data){                    var newBox = document.createElement('div');                    newBox.className = 'box';                    container.appendChild(newBox);                    var newBoxImage = document.createElement('div');                    newBoxImage.className = 'box_img';                    var img = document.createElement('img');                    img.src = "../img/"+item.src;                    newBoxImage.appendChild(img);                    newBox.appendChild(newBoxImage);                }                imgLocation(container, boxArr, boxHeightArr);            }        }    }</script>    <div id="container">        <div class="box">            <div class="box_img">                <img src="../img/1.jpg" alt="">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../img/2.jpg" alt="">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../img/3.jpg" alt="">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../img/4.jpg" alt="">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../img/5.jpg" alt="">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../img/6.jpg" alt="">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../img/7.jpg" alt="">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../img/8.jpg" alt="">            </div>        </div>        <div class="box">            <div class="box_img">                <img src="../img/9.jpg" alt="">            </div>        </div>    </div></body></html>

大致的思路就是先将第一排图片统一宽度排列好,然后筛选出高度最小的那张图片,第二排第一张图片补在高度最小的那张图片下,第二张图片补在高度第二小的图片下,这样依次排列,同时监听浏览器的滚动事件来实现不断加载图片。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台