瀑布流布局

特點(diǎn)：利用絕對(duì)定位固定圖片位置，圖片等寬不等高，參差不齊，滾動(dòng)滾輪能自動(dòng)加載。

結(jié)構(gòu)


圖片之間的距離用padding實(shí)現(xiàn)，而不是margin

等寬不等高

Paste_Image.png
Paste_Image.png

效果：

offsetWidth屬性獲取元素的寬度

Paste_Image.png

獲取頁(yè)面的寬度

Paste_Image.png

Math.floor取整

Paste_Image.png

cssText的方式設(shè)置樣式

Paste_Image.png

第二行的第一張圖片加在第一行高度最小的圖片之后，即top值等于最小高度

Paste_Image.png

Math.min.apply(null,harr);//求數(shù)組最小值

核心代碼

Paste_Image.png

布局效果完成

加載數(shù)據(jù)塊的條件

加載

混雜模式和標(biāo)準(zhǔn)模式，混雜模式下，使用document.body，標(biāo)準(zhǔn)模式下，使用document.documentElement

Paste_Image.png

獲取所有元素

 s = oP.getElementsByTagName('*');

<!Doctype>
<html>

    <head>
        <meta charset="utf-8" />
        <title>瀑布流布局</title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
            
            #main {
                width: 1185px;
                margin: 0px auto;
                position: relative;
            }
            
            .box {
                padding-left: 15px;
                padding-top: 15px;
                float: left;
            }
            
            .pic {
                padding: 10px;
                border: 1px solid #CCCCCC;
                border-radius: 5px;
                box-shadow: 0 0 5px #CCCCCC;
            }
            
            .pic img {
                width: 200px;
                height: auto;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                setBoxPosition();
                window.onscroll = function() {
                    if(checkScrollSlide()) {
                        var main = document.getElementById("main");
                        var imgUrl = "http://coding.imooc.com/static/module/index/img/banner02.jpg";
                        //模擬動(dòng)態(tài)添加10個(gè)box數(shù)據(jù)
                        for(var i = 0; i < 10; i++) {
                            var box = getBoxDiv(imgUrl);
                            main.appendChild(box);
                        }
                        setBoxPosition();
                    }
                }

                /**
                 * 設(shè)置Box所在位置，實(shí)現(xiàn)瀑布流效果
                 */
                function setBoxPosition() {
                    //將main下所有class為box的元素取出來(lái)
                    var boxs = document.getElementById("main").getElementsByClassName("box");
                    //將box按照高度進(jìn)行排列
                    var boxsPos = new Array(); //box底部相對(duì)頁(yè)面位置
                    for(var i = 0; i < boxs.length; i++) {
                        if(i < 5) { //由于在CSS中固定了main的寬度，所以每列只能顯示五行
                            boxsPos.push(boxs[i].offsetHeight);
                        } else {
                            var minH = Math.min.apply(null, boxsPos);
                            var index = getMinHIndex(boxsPos, minH);
                            //設(shè)置box的絕對(duì)定位
                            boxs[i].style.position = "absolute";
                            boxs[i].style.top = minH + "px";
                            boxs[i].style.left = index * boxs[i].offsetWidth + "px";
                            //更新boxsPos位置信息
                            boxsPos[index] += boxs[i].offsetHeight;
                        }
                    }
                }
                /**
                 * 取出boxsPos中最小值的索引
                 */
                function getMinHIndex(arr, val) {
                    for(var i = 0; i < arr.length; i++) {
                        if(arr[i] == val) {
                            return i;
                        }
                    }
                }
                /**
                 * 檢測(cè)是否具備了滾動(dòng)加載數(shù)據(jù)的條件
                 */
                function checkScrollSlide() {
                    var main = document.getElementById("main");
                    var boxs = main.getElementsByClassName("box");
                    var lastBoxHeight = boxs[boxs.length - 1].offsetTop
                        //+ Math.floor(boxs[boxs.length - 1].offsetHeight / 2);
                    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                    var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
                    return(scrollTop + screenHeight > lastBoxHeight) ? true : false;
                }

                /**
                 * 創(chuàng)建Box節(jié)點(diǎn)
                 */
                function getBoxDiv(src) {
                    var box = document.createElement("div");
                    var pic = document.createElement("div");
                    var img = document.createElement("img");
                    box.className = "box";
                    pic.className = "pic";
                    img.src = src;
                    box.appendChild(pic);
                    pic.appendChild(img);
                    return box;
                }
            }
        </script>
    </head>

    <body>
        <div id="main">
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
            <div class="box">
                <div class="pic">
                    ![](http://upload-images.jianshu.io/upload_images/5540636-b5103446b1e77dbd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                </div>
            </div>
        </div>
    </body>

</html>

jq實(shí)現(xiàn)##

獲取寬度， obj.width(內(nèi)容寬度)和obj.outerWidth()（包括padding和border）

Paste_Image.png

設(shè)置寬度，不需要加單位

Paste_Image.png

jq中用each（index，value）遍歷所有的boxs，其中value是dom對(duì)象，需要轉(zhuǎn)換為jq對(duì)象，$(value)

Paste_Image.png
Paste_Image.png

eq（index）方法

Paste_Image.png

$.inArray（值，所在數(shù)組）方法判斷一個(gè)值在數(shù)組中出現(xiàn)的索引

jq實(shí)現(xiàn)瀑布流布局部分代碼###

Paste_Image.png
Paste_Image.png

onscroll事件事件瀑布流加載###

$('#main>div').last();去最后的一個(gè)div

Paste_Image.png

jq：$lastBox.offset().top先調(diào)用offset()方法，再取屬性值
js：lastBox.offsetTop屬性

Paste_Image.png

此時(shí)的value也是js原生的對(duì)象
Jquery對(duì)象本質(zhì)是一個(gè)“類(lèi)數(shù)組”

Paste_Image.png
Paste_Image.png

通過(guò)$(value).attr('src');取值

Paste_Image.png

jq 實(shí)現(xiàn)加載的代碼###

Paste_Image.png
Paste_Image.png

css3多欄布局##

多欄布局，利用columns屬性：多欄布局column-width可以設(shè)置每一列的寬度，并根據(jù)窗口寬度除以每一列寬度得到的列數(shù)進(jìn)行縱向排列div模塊，實(shí)現(xiàn)瀑布流布局

知識(shí)點(diǎn)：

  • column的瀏覽器兼容問(wèn)題，不同內(nèi)核要寫(xiě)其前綴
    -webkit Google瀏覽器內(nèi)核
    -ms IE
    -o 歐朋opera
    -moz 火狐FireFox

  • column-width 和column-count沒(méi)有必要同時(shí)出現(xiàn)

  • column-rule設(shè)置列與列之間的邊框

  •  column-gap 設(shè)置列間距，不一定定義多少，實(shí)際就顯示多少。其計(jì)算規(guī)則：用當(dāng)前瀏覽器寬口寬除以定義的列寬，剩下的距離平均分配

設(shè)置了column-width屬性的值

Paste_Image.png

效果

隨著窗口的大小變化，列數(shù)也會(huì)跟著改變

Paste_Image.png

column-rule設(shè)置邊框?qū)傩?br> column-gap設(shè)置內(nèi)間距

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
var $div = $('div') //jQuery對(duì)象
var div = $div.get(0) ;//通過(guò)get方法，轉(zhuǎn)化成DOM對(duì)象
div.style.color = 'red' //操作dom對(duì)象的屬性

總結(jié)##

比較
js方式：

Paste_Image.png

css3方式：

Paste_Image.png

擴(kuò)展##

使用jQuery實(shí)現(xiàn)加載圖片帶有分散效果的瀑布流布局

Paste_Image.png
任務(wù)
一、定義圖片布局函數(shù)waterfall
二、在waterfall函數(shù)中定義根據(jù)class獲取元素函數(shù)getByClass
三、計(jì)算整個(gè)父盒子的寬度且讓它在瀏覽器中水平居中
四、計(jì)算及排列每個(gè)數(shù)據(jù)塊應(yīng)該出現(xiàn)的位置，一開(kāi)始數(shù)據(jù)塊緊跟在第二張圖片的后邊且位于最高的那個(gè)圖片的下邊，然后通過(guò)動(dòng)畫(huà)分散到它該出現(xiàn)的位置
五、拖動(dòng)滾動(dòng)條時(shí)定義檢測(cè)是否具備了滾條加載數(shù)據(jù)塊條件的函數(shù)。
六、遍歷給出的數(shù)據(jù)，將圖片添加到數(shù)據(jù)塊中渲染出來(lái)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容