一、javascript和html代碼實現瀑布流的佈局

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>瀑布流第一步</title> 
<style> 
    *{margin:0px;padding:0px;} 
    #main .pin{ 
        width:225px; 
        height:auto; 
        padding:15px 0px 0px 15px; 
        float:left; 
    } 
 
    #main .pin .box{ 
        width:205px; 
        height:auto; 
        padding:10px; 
        background:#FFF; 
        border:1px solid #CCC; 
        box-shadow:0px 0px 6px #CCC; 
        border-radius:5px; 
    } 
    #main .pin .box img{ 
        width:205px; 
    } 
</style> 
<!-- 頁面拖拽插件 --> 
<script type="text/javascript" src="./js/drag.js"> 
 
</script> 
<script type="text/javascript"><!-- 
//1 
window.onload = function () { 
    //2.定義父級 
    var oParent = document.getElementById('main'); 
    //9.調用函數並定義 
    var aPin = getClassObj(oParent,'pin'); 
    //alert(aPin.length); 
    var iPinW = aPin[0].offsetWidth; 
    //alert(iPinW); 
    //10.計算頁面可以放下多少個圖片 
    var num = Math.floor(document.documentElement.clientWidth/iPinW); 
    //alert(num); 
    //11.設置父級居中的樣式 
    oParent.style.cssText = 'width:'+num*iPinW+'px;margin:0 auto;'; 
     
    //12準備一個數組 
    var compareAarr = []; 
    //17定義一個字符串 
    //var str = ''; 
    //13 
    for(var i=0;i<aPin.length;i++){ 
        //22設置第一行的數量 
        if(i<num){ 
             
         
        //獲取每個圖品的offsetHeight值 
        compareAarr[i] = aPin[i].offsetHeight; 
        //17獲取高度的索引 
        //str += i+'=>'+aPin[i].offsetHeight+'\n'; 
        //23 
        }else{ 
            //取數組中的最小高度  compareAarr 
            var minH = Math.min.apply({},compareAarr); 
            //獲取最小的key值 
            var minKey = getMinKey(compareAarr,minH); 
            //定位超出寬度多的那個 
            aPin[i].style.position = 'absolute'; 
            //取超出的那個圖片的top值 
            aPin[i].style.top = minH + 'px'; 
            //設置超出那個圖片的left值 
            aPin[i].style.left = aPin[minKey].offsetLeft + 'px'; 
            //超出最後一個在加一 重新計算最低minH 
            compareAarr[minKey] += aPin[i].offsetHeight; 
        } 
    } 
 
     
    //實現圖片的拖拽 
    for(var i=num;i<aPin.length;i++){ 
        //絕對定位 
        aPin[i].style.position = 'absolute'; 
        drag(aPin[i]); 
    } 
} 
    /** 
        獲取數組組最小的鍵值 
        arr數組 
        minH最小鍵值 
    */ 
    //18定義一個函數   獲取數組(compareAarr)中對應的最小的那個高的值(minH) 
    function getMinKey(arr,minH){ 
        for(key in arr){ 
            if(arr[key] == minH){ 
                return key; 
            } 
        } 
    } 
     
    /** 
        通過class選擇元素 
        parent父級 
        className類名 
    */ 
    //3.定義一個函數 
    function getClassObj(parent,className){ 
        //4.定義匹配父級下面所有的元素 
        var obj = parent.getElementsByTagName('*'); 
        //5.定義一個數組 
        var result = []; 
        //6.循環obj 
        for(var i=0;i<obj.length;i++){ 
            if(obj[i].className == className){ 
                //7.pushu進result中 
                result.push(obj[i]); 
            } 
        } 
        //8 
        return result; 
    } 
     
--></script> 
</head> 
<body> 
 
    <div id="main"> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/0.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/1.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/2.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/3.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/4.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/5.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/6.jpg"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/7.jpg"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/8.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/4.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/9.png"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/7.jpg"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/8.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/9.png"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/7.jpg"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/8.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/9.png"> 
            </div> 
        </div> 
         
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/0.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/1.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/2.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/5.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/4.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/0.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/1.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/5.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/3.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/4.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/5.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/1.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/2.jpg"> 
            </div> 
        </div> 
 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/3.jpg"> 
            </div> 
        </div> 
        <div class="pin"><!--每一個小塊--> 
            <div class="box"> 
                <img src="./img/5.jpg"> 
            </div> 
        </div> 
    </div> 
     
</body> 
</html>
一、javascript和html代碼實現瀑布流的佈局

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Mysql字段數據類型Decimal 與Double區別的分析

一、後臺首頁index.php【dedecms後臺源碼分析】

二、後臺登陸login.php【dedecms後臺源碼分析】

三、瀑布流中的ajax請求詳解

我的友情鏈接

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

linux以太網驅動總結
