美文网首页
瀑布流布局

瀑布流布局

作者: 大乔是个美少女 | 来源:发表于2018-06-01 15:02 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="image/0.jpg">
            </div>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</html>
window.onload = function(){
    waterfall('main', 'box');
    var dataInt = {"data":[{"src": "0.jpg"},{"src": "1.jpg"},{"src": "2.jpg"},{"src": "3.jpg"}]};
    window.onscroll = function(){
        if(checkScrollSlide()){
            // 将数据块渲染到当前页面的尾部
            var oParent = document.getElementById('main');
            for(var i = 0; i < dataInt.data.length; i++) {
                var oBox = document.createElement('div');
                oBox.className = 'box';
                oParent.appendChild(oBox);
                var oPic = document.createElement('div');
                oPic.className = 'pic';
                oBox.appendChild(oPic);
                var oImg = document.createElement('img');
                oImg.src="image/"+dataInt.data[i].src;
                oPic.appendChild(oImg);
            }
            waterfall('main', 'box');
        }
    }
}

function waterfall(parent, box){
    // 将main下所有class为box的元素都取出来
    var oParent = document.getElementById(parent);
    var oBoxs = getByClass(oParent, box);
    // 计算整个页面显示的列数(页面宽/box的宽)
    var oBoxW = oBoxs[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
    // 设置main的宽度
    oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;'
    var hArr = []; // 存放每一列高度的数组
    for(var i = 0; i < oBoxs.length; i++){
        if(i < cols){
            hArr.push(oBoxs[i].offsetHeight);
        } else {
            var minH = Math.min.apply(null, hArr);
            var index = getMinhIndex(hArr, minH);
            oBoxs[i].style.position="absolute";
            oBoxs[i].style.top = minH + 'px';
            // oBoxs[i].style.left = oBoxW * index + 'px';
            oBoxs[i].style.left = oBoxs[index].offsetLeft+'px';
            hArr[index] += oBoxs[i].offsetHeight;
        }
    }
}

// 根据class获取元素
function getByClass(parent, clsName){
    var boxArr = new Array(),  // 用来存储获取到的所有class为box的元素
        oElements=parent.getElementsByTagName("*");
    for(var i=0; i<oElements.length; i++){
        if(oElements[i].className==clsName){
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}

function getMinhIndex(arr, val){
    for(var i in arr){
        if(arr[i] == val) {
            return i;
        }
    }
}

//检测是否具备了滚动加载数据块的条件
function checkScrollSlide(){
    var oParent = document.getElementById('main');
    var oBoxs = getByClass(oParent, 'box');
    var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
    // 标准模式和混杂模式
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientHeight || document.documentElement.clientHeight;
    return (lastBoxH < scrollTop + height)? true: false;
}

相关文章

  • 瀑布流布局 的学习

    1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...

  • 瀑布流、木桶布局

    瀑布流 瀑布流效果代码 木桶布局 木桶布局效果(加载有点慢)代码

  • 瀑布流照片墙布局

    title: 瀑布流照片墙布局 瀑布流概念 瀑布流布局是错落式的布局方式。它有一个特点,整个布局以列为单位,下一个...

  • CSS经典布局

    圣杯布局 瀑布流

  • 瀑布流

    瀑布流布局瀑布流jsonp新闻页

  • 瀑布流布局_木桶布局

    题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...

  • 瀑布流和懒加载结合

    实现一个瀑布流布局效果 瀑布流

  • 瀑布流

    什么是瀑布流: 欣赏 pinterest 样式分析 瀑布流,又被称作为瀑布流式布局,是一种比较流行的网站页面布局方...

  • 瀑布流

    1、什么是瀑布流 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚...

  • 瀑布流的三种实现

    先来欣赏三个瀑布流的网站 pinterest 淘宝爱逛街 蘑菇街 什么是瀑布流? 瀑布流,又称瀑布流式布局。 这种...

网友评论

      本文标题:瀑布流布局

      本文链接:https://www.haomeiwen.com/subject/xacksftx.html