【Javascript Demo】圖片瀑布流實現

標籤：src   允許   javascrip   指定   java   set   源碼   關聯   mda   

瀑布流就是像瀑布一樣的網站——豐富的網站內容，特別是絢美的圖片會讓你流連忘返。你在瀏覽網站的時候只需要輕輕滑動一下滑鼠滾輪，一切的美妙的圖片精彩便可呈現在你面前。瀑布流網站是新興的一種網站模式——她的典型代表是pinterest、美麗說、蘑菇街這類型的網站。

 

下面是效果：

 

核心內容：

1.先設定布局

主要HTML代碼如下

<div id="container">    <div class="box">        <div class="content">            <img src="../imgs/Girls/01.jpg">        </div>    </div>     ...</div>

然後設定寬度固定，高度自適應，.box 相對布局，向左浮動：

.box { position: relative; float: left; }.content { padding: 2px; border: 1px solid #ccc; border-radius: 2px; }.content img { width: 234px; height: auto; }#container { background: #fff none repeat scroll 0 0;  margin: 0 auto; width: auto; }

 

2.圖片位置擺放

因為圖片的高度不一致，先根據頁面大小擷取第一行的圖片數量，然後把第二行第一個張圖片放到第一行高度最低的圖片下面，以此類推：

function imgLocation() {    var cparent = document.getElementById("container");    //擷取所有類名為box的元素    var ccontent = getChildElement(cparent,"box");    //第一張圖片的寬度    var imgWidth = ccontent[0].offsetWidth;    //第一列圖片數量    var numLine = Math.floor(document.documentElement.clientWidth/imgWidth);    //設定父容器的寬度    cparent.style.cssText = "width:"+ imgWidth * numLine + "px";    //擷取每一張圖片的高度    var  boxHeightArr = [];    for(var i=0;i<ccontent.length;i++){        if(i<numLine){            //把第一行元素的高度添加到數組中去            boxHeightArr[i] = ccontent[i].offsetHeight;        }else {            //擷取第一行圖片高度最低的圖片,然後把第二行第一種圖片放在其下面，以此類推            var minHeight = Math.min.apply(null,boxHeightArr);            //擷取最低高度圖片的Index            var minIndex = getMinHeightIndex(boxHeightArr,minHeight);            ccontent[i].style.position = "absolute";            ccontent[i].style.top = minHeight+"px";            ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";            //重新計算高度            boxHeightArr[minIndex] += ccontent[i].offsetHeight;        }    }}function getMinHeightIndex(boxHeightArr, minHeight) {    for(var i in boxHeightArr){        if(boxHeightArr[i] === minHeight){            return i;        }    }}function getChildElement(parent,className) {    var contentArr = [];    var allcontent = parent.getElementsByTagName("*");    for(var i=0;i<allcontent.length;i++){        if(allcontent[i].className === className){            contentArr.push(allcontent[i]);        }    }    return contentArr;}

 

3.滾動式載入

然後通過判斷滑鼠是否滑動到底部，確定是否自動載入資料。

先判斷是否滑到頁面底部：

function isScrollBottom(){    var cparent = document.getElementById("container");    var ccontent = getChildElement(cparent,"box");    //最後一張圖片出現一半時的頁面高度    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop + Math.floor(ccontent[ccontent.length - 1].offsetHeight/2);    // 當前頁面的高度    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;    // 滑鼠滾動的高度    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    //是否允許滾動    return (lastContentHeight < (pageHeight + scrollTop))?true:false;}

然後監聽滾動事件，當滿足載入條件時，載入圖片：

window.onscroll = function () {    //最後一張圖片出現一半時載入    if(isScrollBottom()){        //載入圖片        var cparent = document.getElementById("container");        for(var i=0;i<dataImg.data.length;i++){            var box = document.createElement("div");            box.className = "box";            cparent.appendChild(box);            var content = document.createElement("div");            content.className = "content";            box.appendChild(content);            var img = document.createElement("img");            img.src = dataImg.data[i].src;            content.appendChild(img);        }        //重新設定圖片位置        imgLocation();    }}

 

PS:也可以通過Ajax 初始化圖片HTML 程式碼：

function initializeImgs() {    var xmlhttp;    if (window.XMLHttpRequest)    {// code for IE7+, Firefox, Chrome, Opera, Safari        xmlhttp=new XMLHttpRequest();    }    else    {// code for IE6, IE5        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    }    xmlhttp.onreadystatechange = handleResponse;    xmlhttp.open("GET",url4girls,true);    xmlhttp.send();}function handleResponse(e){    //當 onreadystatechange 事件被觸發後，瀏覽器會把一個 Event 對象傳遞給指定的處理函數，target 屬性則會被設為與此事件關聯的XMLHttpRequest    if(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){ //請求成功        addImgBox(e.target.responseText);    }}function addImgBox(data) {    //解析返回的XML檔案    var imgArr = loadXMLString(data).getElementsByTagName("string");    var cparent = document.getElementById("container");    for(var i=0;i<imgArr.length;i++){        var box = document.createElement("div");        box.className = "box";        cparent.appendChild(box);        var content = document.createElement("div");        content.className = "content";        box.appendChild(content);        var img = document.createElement("img");        img.src = imgArr[i].innerHTML;        content.appendChild(img);    }    imgLocation();}

 

相關檔案：

index_by_javascript.htmlindex_by_javascript.jsindex_by_javascript_ajax.htmlindex_by_javascript_ajax.jsyctools.jswaterfall.css

具體可查看源碼

【Javascript Demo】圖片瀑布流實現