【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

具体可查看源码

巴特西

【Javascript Demo】图片瀑布流实现

最新文章

热门文章