Live2D 看板娘

实现方法：

　　1、JavaScript

　　2、jQuery

　　3、CSS多栏布局

法一：

window.onload=function(){

    waterfall('main','pin');

    var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
    
    window.onscroll=function(){
        if(checkscrollside()){
            var oParent = document.getElementById('main');// 父级对象
            for(var i=0;i<dataInt.data.length;i++){
                var oPin=document.createElement('div'); //添加 元素节点
                oPin.className='pin';                   //添加 类名 name属性
                oParent.appendChild(oPin);              //添加 子节点
                var oBox=document.createElement('div');
                oBox.className='box';
                oPin.appendChild(oBox);
                var oImg=document.createElement('img');
                oImg.src='./images/'+dataInt.data[i].src;
                oBox.appendChild(oImg);
            }
            waterfall('main','pin');
        };
    }
}

/*
    parend 父级id
    pin 元素id
*/
function waterfall(parent,pin){
    var oParent=document.getElementById(parent);// 父级对象
    var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
    var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
    var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
    oParent.style.cssText=''+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
    for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
        var pinH=aPin[i].offsetHeight;
        if(i<num){
            pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
        }else{
            var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
            var minHIndex=getminHIndex(pinHArr,minH);
            aPin[i].style.position='absolute';//设置绝对位移
            aPin[i].style.top=minH+'px';
            aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
            //数组 最小高元素的高 + 添加上的aPin[i]块框高
            pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
        }
    }
}

/****
    *通过父级和子元素的class类 获取该同类子元素的数组
    */
function getClassObj(parent,clsName){
    var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
    var pinS=[];//创建一个数组 用于收集子元素
    for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
        if (obj[i].className==clsName){
            pinS.push(obj[i]);
        }
    };
    return pinS;
}
/****
    *获取 pin高度 最小值的索引index
    */
function getminHIndex(arr,minH){
    for(var i in arr){
        if(arr[i]==minH){
            return i;
        }
    }
}


function checkscrollside(){
    var oParent=document.getElementById('main');
    var aPin=getClassObj(oParent,'pin');
    var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
    var documentH=document.documentElement.clientHeight;//页面高度
    return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}
View Code

通过类名去获取元素的方法:

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <ul id="list">
        <li class="on">1</li>
        <li class="select">2</li>
        <li class="on">3</li>
        <li>4</li>
    </ul>
    <p class="on">class为on的p标签</p>
</body>

</html>
<script type="text/javascript">
window.onload = function() {
    var len1 = getByClass("on", "list");
    alert(len1.length); // 结果等于2为正确
    var len2 = getByClass("on");
    alert(len2.length); // 结果等于3为正确
}

function getByClass(clsName, parent) {
    //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素  
    var clsArr = [];
    if (parent) {
        var oParent = document.getElementById(parent);
        var oClass = oParent.getElementsByTagName("*");
        for (var i = 0; i < oClass.length; i++) {
            if (oClass[i].className == clsName) {
                clsArr.push(oClass[i])
            }
        }
        return clsArr;
    } else {
        var oClass = document.getElementsByTagName("*");
        for (var i = 0; i < oClass.length; i++) {
            if (oClass[i].className == clsName) {
                clsArr.push(oClass[i])
            }
        }
        return clsArr;
    }
}
</script>
View Code

法二：

$(window).on("load", function() {
    waterfall('main', 'pin');
    var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] };
    window.onscroll = function() {
        if (checkscrollside()) {
            $.each(dataInt.data, function(index, value) {
                var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
                var $oBox = $('<div>').addClass('box').appendTo($oPin);
                $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($oBox);
            });
            waterfall();
        };
    }
});

/*
    parend 父级id
    pin 元素id
*/
function waterfall(parent, pin) {
    var $aPin = $("#main>div");
    var iPinW = $aPin.eq(0).outerWidth(); // 一个块框pin的宽
    var num = Math.floor($(window).width() / iPinW); //每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
    //oParent.style.cssText=''+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
    $("#main").width(iPinW * num).css("margin","0 auto");
    // $("#main").css({
    //     '': iPinW * num,
    //     'margin':'0 auto'
    // });

    var pinHArr = []; //用于存储 每列中的所有块框相加的高度。

    $aPin.each(function(index, value) {
        var pinH = $aPin.eq(index).outerHeight();
        if (index < num) {
            pinHArr[index] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
        } else {
            var minH = Math.min.apply(null, pinHArr); //数组pinHArr中的最小值minH
            var minHIndex = $.inArray(minH, pinHArr);
            $(value).css({
                'position': 'absolute',
                'top': minH + 15,
                'left': $aPin.eq(minHIndex).position().left
            });
            //数组 最小高元素的高 + 添加上的aPin[i]块框高
            pinHArr[minHIndex] += $aPin.eq(index).outerHeight() + 15; //更新添加了块框后的列高
        }
    });
}

function checkscrollside() {
    var $aPin = $("#main>div");
    var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2); //创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
    var scrollTop = $(window).scrollTop() //注意解决兼容性
    var documentH = $(document).width(); //页面高度
    return (lastPinH < scrollTop + documentH) ? true : false; //到达指定高度后 返回true，触发waterfall()函数
}
View Code

法三：

.container {
    -webkit-column-width: 197px;
    -moz-column-width: 197px;
    -o-column-width: 197px;
    -ms-column-width: 197px;
/*     -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    -o-column-gap: 5px;
    -ms-column-gap: 5px; */

}


/*数据块 砖块*/

.container {
        padding: 10px;
    }
    
    .container div {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 5px #ccc;
        width:165px;
        margin-bottom:10px;
    }
    
    .container div img {
        display: block;
        width: 165px;
        height: auto;
    }
View Code

CSS3和JS瀑布流实现方式比较：

JS原生方式：

　　1 需要计算列数=浏览器窗口的宽度/图片宽度

　　　图片定位是需要根据每一列数据块的高度计算接下来图片的位置

　　2 图片排序是按照图片计算的位置横向排序，位置是计算出来的比较规范

CSS3方式：

　　1 不需要计算，浏览器自动计算，只需设置列宽，性能高

　　2 列宽随着浏览器窗口大小进行改变，用户体验不好

　　3 图片排序按照垂直顺序排序，打乱图片显示顺序

　　4 图片加载还是依靠JS来完成

　　5 浏览器兼容也不是很好

（说明：由于使用CSS3多栏布局来实现瀑布流有很大的局限性，所以上面的CSS3实现方式的代码只有多栏分列的部分，没有继续完成js的部分，最好还是使用JS或者jQuery来完成即可。）

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jiangtengteng/p/5430400.html