【Javascript Demo】圖片瀑布流實現

瀑布流就是像瀑布同樣的網站——豐富的網站內容，特別是絢美的圖片會讓你流連忘返。你在瀏覽網站的時候只須要輕輕滑動一下鼠標滾輪，一切的美妙的圖片精彩即可呈如今你面前。瀑布流網站是新興的一種網站模式——她的典型表明是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.html
index_by_javascript.js
index_by_javascript_ajax.html
index_by_javascript_ajax.js
yctools.js
waterfall.css

具體可查看源碼