jQuery下的瀑布流效果

最新推荐文章于 2024-05-25 21:12:27 发布

葡萄干是个程序员

最新推荐文章于 2024-05-25 21:12:27 发布

阅读量541

点赞数 1

分类专栏： Web前端文章标签： jquery 瀑布流

本文链接：https://blog.csdn.net/qq_15096707/article/details/50593401

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

使用jQuery制作瀑布流效果，这里需要引入jQuery库。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery瀑布流-布局</title>
    <script src="jquery.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="content">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/9.jpg">
            </div>
        </div>

        <div class="box">
            <div class="content">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="content">
                <img src="img/9.jpg">
            </div>
        </div>


    </div>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    margin: 10px auto;
}

.box {
    float: left;
}

.content {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}

.content img {
    width: 190px;
    height: auto;
}

app.js

/**
 * Created by DreamBoy on 2016/1/26.
 */
$(document).ready(function() {
    $(window).on("load", function() {
        /*var test = document.getElementsByClassName("box");
        console.log(test[0]);*/

        imgLocation();

        //模拟网络获取数据
        //json字符串——一种网络传输数据的协议格式
        var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},
            {"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},
            {"src":"8.jpg"},{"src":"9.jpg"}]};

        window.onscroll = function() {
            if(scrollside()) {
                $.each(imgData.data,function(index,value) {
                    var box = $("<div>").addClass("box").appendTo("#container");
                    var content = $("<div>").addClass("content").appendTo(box);

                    //console.log(value);
                    //console.log("./img/"+$(value).attr("src"));

                    $("<img>").attr("src", "./img/"+$(value).attr("src")).appendTo(content);
                });

                imgLocation();
            }
        };

    });
});

function scrollside() {
    var box = $(".box");
    //var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height() / 2);
    var lastboxHeight = box.last().get(0).offsetTop + box.last().height() / 2;

    //当前document的高度
    var documentHeight = $(window).height();
    //被卷去的内容的高度
    var scrollHeight = $(window).scrollTop();

    /*console.log("$(window).height()" + $(window).height());
    console.log("$(document).height()" + $(document).height());*/

    /*console.log("box.last().get(0).offsetTop: " + box.last().get(0).offsetTop);
    console.log("Math.floor(box.last().height() / 2): " + Math.floor(box.last().height() / 2));
    console.log("lastboxHeight: " + lastboxHeight);
    console.log("scrollHeight: " + scrollHeight);
    console.log("documentHeight: " + documentHeight);
    console.log("scrollHeight + documentHeight: " + (scrollHeight + documentHeight));*/

    return lastboxHeight <= scrollHeight + documentHeight;
}

function imgLocation() {
    var box = $(".box");
    //var boxWidth = box[0].offsetWidth;
    //console.log(boxWidth);
    var boxWidth = box.eq(0).width();
    //计算一行中可以放置多少张图片
    var num = Math.floor($(window).width() / boxWidth);

    //为最外层的容器 container 设置宽度
    var container = $("#container");
    container.width(boxWidth * num);

    var boxArr = [];
    box.each(function(index, value) {
        // index为box中的下标，value是对应下标index的元素对象
        // value 与 box.eq(index) 是不一样的
        // value 是一个元素对象 含有标签、内容、属性等
        // 而 box.eq(index) 是一个jQuery对象
        // $(value) 等价于 box.eq(index)

        //console.log(index + "--" + value); // 0--[object HTMLDivElement]

        //js方式
        //var boxHeight = value.offsetHeight;

        //jQuery方式
        var boxHeight = box.eq(index).height();
        if(index<num) {
            boxArr[index]=boxHeight;
            //console.log(boxHeight);
        } else {
            //当前boxArr数组盒子中最小的高度
            var minBoxHeight = Math.min.apply(null, boxArr);
            //console.log(minBoxHeight);
            var minBoxIndex = $.inArray(minBoxHeight, boxArr);
            //console.log(value);
            //console.log(box.eq(index));

            $(value).css({
                position: "absolute",
                top: minBoxHeight,
                left: box.eq(minBoxIndex).position().left
            });

            boxArr[minBoxIndex] += boxHeight;
        }
    });
}

运行结果如下：