實現瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流佈局</title>
    <style>
    *{padding:0;margin:0;}
        .clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.main {
  position: relative;
  -webkit-column-width: 210px;
  -moz-column-width: 210px;
  -webkit-column-gap: 5px;
  -moz-column-gap: 5px;
}
.box {
  float: left;
  padding: 15px 0 0 15px;
}
.box .pic {
  width: 180px;
  height: auto;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px #cccccc;
  border: 1px solid #cccccc;
}
.box .pic img {
  display: block;
  width: 100%;
}

    </style>
</head>
<body>
    <div class="main clearfix" id="main">
        <div class="box">
            <div class="pic"><img src="./images/0.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/1.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/2.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/3.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/4.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/5.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/6.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/7.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/8.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/9.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/10.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/11.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/12.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/13.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/14.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/15.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/16.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/17.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/18.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/19.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/20.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/21.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/22.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/23.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/24.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/25.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/26.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/27.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/28.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/29.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/25.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/26.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/27.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/28.jpg"></div>
        </div>
        <div class="box">
            <div class="pic"><img src="./images/29.jpg"></div>
        </div>
    </div>
    <script>
window.onload = function(){
    waterfall('main','box');

    //模擬json數據
    var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};

    //監聽scroll事件
    window.onscroll = function(){
        var isPosting = false;
        if(checkScollSlide('main','box') && !isPosting){
            var oParent = document.getElementById('main');
            for(var i in dataJson.data){
                isPosting = true;
                var oBox = document.createElement('div');
                oBox.className = 'box';
                oBox.innerHTML = '<div class="pic"><img src="./images/'+dataJson.data[i].src+'"></div>';
                oParent.appendChild(oBox);
            }
            isPosting = false;
            waterfall('main','box');
        }
    }

}

/*
* parent 父元素id clsName 塊元素類*/
function waterfall(parent,clsName){
    //獲取父元素
    var oParent = document.getElementById(parent),
    //獲取所有box
    aBoxArr = oParent.getElementsByClassName(clsName),
    //單個box寬度
    iBoxW = aBoxArr[0].offsetWidth,
    // 列數
    cols = Math.floor(document.documentElement.clientWidth / iBoxW);

    oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';

    //儲存所有的高度
    var hArr = [];
    for(var i = 0; i < aBoxArr.length; i++){
        if(i < cols){
            hArr[i] = aBoxArr[i].offsetHeight;
        }else{
            //獲取hArr最小值
            var minH = Math.min.apply(null,hArr),
            // hArr最小值索引index
            minHIndex = getMinHIndex(hArr,minH);
            aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';

            //添加元素之後更新hArr
            hArr[minHIndex] += aBoxArr[i].offsetHeight;
        }
    }
}

//獲取最小值索引
function getMinHIndex(arr,val){
    for(var i in arr){
        if(arr[i]  == val){
            return i;
        }
    }
}

//檢查是否滿足加載數據條件,parent 父元素id clsName 塊元素類
function checkScollSlide(parent,clsName){
    var oParent = document.getElementById(parent),
        aBoxArr = oParent.getElementsByClassName(clsName),
        // 最後一個box元素的offsetTop+高度的一半
        lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,
        //兼容js標準模式和混雜模式
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        height = document.documentElement.clientHeight || document.body.clientHeight;
    return lastBoxH < scrollTop + height ? true : false;
}

</script>
    
</body>
</html>

jquery方法

$( window ).on( "load", function(){
    waterfall('main','box');

    //模擬數據json
    var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};

    window.οnscrοll=function(){
        var isPosting = false;
        if(checkscrollside('main','box') && !isPosting){
            isPosting = true;
            $.each(dataJson.data,function(index,dom){
                var $box = $('<div class="box"></div>');
                $box.html('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>');
                $('#main').append($box);
                waterfall('main','box');
                isPosting = false;
            });
        }
    }
});

/*
 parend 父級id
 clsName 元素class
 */
function waterfall(parent,clsName){
    var $parent = $('#'+parent);//父元素
    var $boxs = $parent.find('.'+clsName);//所有box元素
    var iPinW = $boxs.eq( 0 ).width()+15;// 一個塊框box的寬
    var cols = Math.floor( $( window ).width() / iPinW );//列數
    $parent.width(iPinW * cols).css({'margin': '0 auto'});

    var pinHArr=[];//用於存儲 每列中的所有塊框相加的高度。

    $boxs.each( function( index, dom){
        if( index < cols ){
            pinHArr[ index ] = $(dom).height(); //所有列的高度
        }else{
            var minH = Math.min.apply( null, pinHArr );//數組pinHArr中的最小值minH
            var minHIndex = $.inArray( minH, pinHArr );
            $(dom).css({
                'position': 'absolute',
                'top': minH + 15,
                'left': $boxs.eq( minHIndex ).position().left
            });
            //添加元素後修改pinHArr
            pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了塊框後的列高
        }
    });
}

//檢驗是否滿足加載數據條件，即觸發添加塊框函數waterfall()的高度：最後一個塊框的距離網頁頂部+自身高的一半(實現未滾到底就開始加載)
function checkscrollside(parent,clsName){
    //最後一個塊框
    var $lastBox = $('#'+parent).find('.'+clsName).last(),
        lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2,
        scrollTop = $(window).scrollTop(),
        documentH = $(document).height();
    return lastBoxH < scrollTop + documentH ? true : false;
}

linux常用指令大全

簡單的幻燈片實現

廣度優先搜索--推箱子

瀏覽器加載和渲染html的順序-css渲染效率的探究

知識點總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結