瀑布流点击加载更多（记住tomcat下启动，做过瀑布流的大家估计都知道为啥）

最新推荐文章于 2022-07-22 19:14:00 发布

最骚的就是你

最新推荐文章于 2022-07-22 19:14:00 发布

阅读量2.5k

点赞数

分类专栏： web前端学习文章标签： jquery 图片瀑布流-加载更多

本文链接：https://blog.csdn.net/libin_1/article/details/50449837

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

这里写图片描述

废话不多说，直接上代码：http://download.csdn.net/detail/cometwo/9387665

这个带淡出效果，比较高大上哦：http://download.csdn.net/detail/cometwo/9387971

通过打开/关闭注释235行可以实现自动加载和点击加载更多，是一个瀑布流最经典的例子，完全适用于各种瀑布流项目

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery制作图片瀑布流点击按钮加载更多内容-xw素材网</title>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                left: 0;
                top: 0;
                list-style-type: none;
                background-color: white;
            }

            a,
            img {
                border: 0;
                margin: 0;
                left: 0;
                top: 0;
            }

            body {
                font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
            }
            /* container */

            #container {
                border: 1px solid red;
                width: 95%;
                margin: 50px auto;
            }

            #container ul {
                width: 300px;
                list-style: none;
                float: left;
                margin-right: 20px;
            }

            #container ul li {
                margin-bottom: 20px;
                background: blue;
                /*border: 1px solid black;*/
            }



            #container ul li img {
                width: 100%;

                margin-bottom: -7px;
                /*border: 1px solid red;*/
            }



            .water_user {
                color: blue;
                padding: 10px; 
                margin: 0px;
                border: 1px solid blue;
                background-color: green;
            }

            .water_option {
                /* width: 290px;*/
                background: yellow;
                border-top: 0px #f0f0f0 solid;
                padding: 5px 0 5px 20px;
                border: 1px solid blue;
                height: 20px;
            }

            /*.water_option:after {
                content: "";
                display: block;
                clear: both;
                visibility: hidden;
            }*/

            .water_option .option_item,
            .water_option .split {
                float: right;
                background: yellow;
            }

            .water_option .option_item {
                color: red;
                text-decoration: none;
                margin-right: 10px;
            }

            .water_option .option_item:hover {
                text-decoration: underline;
            }

            .water_option .split {
                line-height: 30px;
                margin: 3px 10px 0 0; 
                height: 15px;
                width: 1px;
                background-color: red;
            }

            .loadMeinvMOre {
                height: 30px;
                line-height: 30px;
                color: red;
                text-align: center;
                background: blue;
                display: block;
                clear: both;
                text-decoration: none;
            }

            .loadMeinvMOre:hover {
                background: blueviolet;
                color: green;
            }
        </style>

    </head>

    <body>

        <div id="container">

            <ul class="col">
                <li>
                    <div class="water_pic">
                        <a href=""><img src="img/1.jpg" alt="" /></a>
                    </div>
                    <div class="water_user">美女小清新_1</div>
                    <div class="water_option">
                        <a href="" class="option_item">收藏 4</a>
                        <span class="split"> </span>
                        <a href="" class="option_item option_comt">评论 8</a>
                        <span class="split"> </span>
                        <a href="" class="option_item option_relay">转播 124</a>
                    </div>
                </li>

            </ul>

            <ul class="col">
                <li>
                    <div class="water_pic">
                        <a href=""><img src="img/2.jpg" alt="" /></a>
                    </div>
                    <div class="water_user">美女小清新_2</div>
                    <div class="water_option">
                        <a href="" class="option_item">收藏 4</a>
                        <span class="split"></span>
                        <a href="" class="option_item option_comt">评论 8</a>
                        <span class="split"></span>
                        <a href="" class="option_item option_relay">转播 124</a>
                    </div>
                </li>
            </ul>
            <ul class="col">
                <li>
                    <div class="water_pic">
                        <a href=""><img src="img/7.jpg" alt="" /></a>
                    </div>
                    <div class="water_user">美女小清新_7</div>
                    <div class="water_option">
                        <a href="" class="option_item">收藏 4</a>
                        <span class="split"></span>
                        <a href="" class="option_item option_comt">评论 8</a>
                        <span class="split"></span>
                        <a href="" class="option_item option_relay">转播 124</a>
                    </div>
                </li>
            </ul>
            <ul class="col">
                <li>
                    <div class="water_pic">
                        <a href=""><img src="img/9.jpg" alt="" /></a>
                    </div>
                    <div class="water_user">美女小清新_8</div>
                    <div class="water_option">
                        <a href="" class="option_item">收藏 4</a>
                        <span class="split"></span>
                        <a href="" class="option_item option_comt">评论 8</a>
                        <span class="split"></span>
                        <a href="" class="option_item option_relay">转播 124</a>
                    </div>
                </li>
            </ul>

            <a href="javascript:" class="loadMeinvMOre" id="loadMeinvMOre">加载更多</a>

        </div>
        <!--container end-->

        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            $(function() {
                function getMinUl() { //每次获取最短的ul,将图片放到其后
                    var $arrUl = $("#container .col");
                    var $minUl = $arrUl.eq(0); //设置比较参考，假设第一个最小
                    var A = "";
                    $arrUl.each(function(index, elem) {
                        //  alert(index+','+$(elem).height());
                        if ($(elem).height() <= $minUl.height()) { //考虑特殊情况
                            $minUl = $(elem); //找到最小的，替换掉之前最小的
                            A += "(" + index + ":" + $(elem).height() + ")" + '\n';
                            //  alert("$minUl.height()  :"+$minUl.height());
                        }
                    });
                    //  alert(A + '\n' + "$minUl.height()返回:" + $minUl.height());
                    return $minUl;
                }
                //url data function dataType
                function loadMeinv() {
                    var data = 0;
                    for (var i = 0; i < 20; i++) { //每次加载时模拟随机加载图片个数
                        data = Math.round(Math.random() * 24);
                        var html = "";
                        html = '<li><div class="water_pic"><a href="#"><img src = img/' + data + '.jpg></a></div><div class="water_user">美女小清新_' + data + '</div><div class="water_option"><a href="" class="option_item">收藏 4</a> <span class="split"></span><a href="" class="option_item option_comt">评论 8</a><span class="split"></span><a href="" class="option_item option_relay">转播 124</a></div></li>';
                        $minUl = getMinUl();
                        $minUl.append(html);
                    }
                }
                loadMeinv();
                //无限加载
                $(window).on("scroll", function() {
                        $minUl = getMinUl();
                        if ($minUl.height() <= $(window).scrollTop() + $(window).height()) {
                            //当最短的ul的高度比窗口滚出去的高度+浏览器高度小时加载新图片
                            //  loadMeinv();//自动加载新图片，打开后可以自动加载
                        }
                    })
                    //老方法，遍历出现问题
                    //              function getMinUl() { //每次获取最短的ul,将图片放到其后
                    //                  var $arrUl = $("#container .col");
                    //                  var $minUl = $arrUl.eq(0);
                    //                  $arrUl.each(function(index, elem) {
                    //                      if ($(elem).height() < $minUl.height()) {
                    //                          $minUl = $(elem);
                    //                      }
                    //                  });
                    //                  return $minUl;
                    //              }
                    //点击更多加载
                $("#loadMeinvMOre").click(function() {
                    $minUl = getMinUl();
                    loadMeinv();
                });
            })
        </script>

    </body>

</html>

此程序在自动加载没有任何问题，但是加载更多会出现小BUG，火狐浏览器测试一切正常，谷歌浏览器和360安全浏览器可能能会出现以下问题，思索良久，不能找出问题原因，盼高人看到，求解，万分感谢！！！小弟在此跪谢

这里写图片描述

*********************************

原地址：http://www.17sucai.com/pins/2929.html#，提供了瀑布流的新思路

<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8" />
        <title>瀑布流</title>
        <script type="text/javascript" src="js/jquery-3.0.0.js"></script>
        <style type="text/css">
            /* 标签重定义 */

            body {
                padding: 0;
                margin: 0;
                background: white;
            }

            img {
                border: none;
            }

            a {
                text-decoration: none;
                color: blue;
            }

            a:hover {
                color: red;
            }

            #title {
                width: 600px;
                margin: 20px auto;
                text-align: center;
                border: 1px solid red;
            }
            /* 定义关键帧 */
            /* wrap */

            #wrap {
                width: auto;
                height: auto;
                margin: 0 auto;
                position: relative;
            }

            #wrap .box {
                width: 280px;
                height: auto;
                padding: 10px;
                border: 1px solid red;
                float: left;
            }

            #wrap .box .info {
                /*width: 280px;
                height: auto;*/
                border: 1px solid blue;
                border-radius: 8px;
                box-shadow: 0 0 11px #666;
                background: #fff;
            }

            #wrap .box .info .pic {
                width: 260px;
                height: auto;
                margin: 0 auto;
                padding-top: 10px;
                border: 1px solid green;
            }

            #wrap .box .info .pic:hover {
                -webkit-animation: shade 3s ease-in-out 1;
                -moz-animation: shade 3s ease-in-out 1;
                -ms-animation: shade 3s ease-in-out 1;
                -o-animation: shade 3s ease-in-out 1;
                animation: shade 3s ease-in-out 1;
            }

            @keyframes shade {
                from {
                    opacity: 1;
                }
                15% {
                    opacity: 0.4;
                }
                to {
                    opacity: 1;
                }
            }

            #wrap .box .info .pic img {
                width: 260px;
                border-radius: 3px;
            }

            #wrap .box .info .title {
                width: 260px;
                height: 40px;
                margin: 0 auto;
                border: 1px solid red;
                line-height: 40px;
                text-align: center;
                font-size: 18px;
                font-weight: bold;
                overflow: hidden;
            }
        </style>

        <script type="text/javascript">
            window.onload = function() {
                    //运行瀑布流主函数
                    PBL('wrap', 'box');
                    //投机取巧的方法
                     window.onresize=function(){
                        window.location.reload();
                    }
                    //模拟数据
                    var data = [{
                        'src': '1.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '2.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '3.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '4.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '5.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '6.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '7.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '8.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '9.jpg',
                        'title': 'This is a title.'
                    }, {
                        'src': '10.jpg',
                        'title': 'This is a title.'
                    }];

                    //设置滚动加载
                    window.onscroll = function() {
                        //校验数据请求
                        if (getCheck()) {
                            var wrap = document.getElementById('wrap');
                            for (i in data) { //创建box
                                var box = document.createElement('div');
                                box.className = 'box';
                                wrap.appendChild(box);
                                //创建info
                                var info = document.createElement('div');
                                info.className = 'info';
                                box.appendChild(info);
                                //创建pic
                                var pic = document.createElement('div');
                                pic.className = 'pic';
                                info.appendChild(pic);
                                //创建img
                                var img = document.createElement('img');
                                img.src = 'img/' + data[i].src;
                                img.style.height = 'auto';
                                pic.appendChild(img);
                                //创建title
                                var title = document.createElement('div');
                                title.className = 'title';
                                info.appendChild(title);
                                //创建a标记
                                var a = document.createElement('a');
                                a.innerHTML = data[i].title;
                                title.appendChild(a);
                            }
                            PBL('wrap', 'box');
                        }
                    }
                }
                /**
                 * 瀑布流主函数
                 * @param  wrap [Str] 外层元素的ID
                 * @param  box  [Str] 每一个box的类名
                 */
            function PBL(wrap, box) {
                //  1.获得外层以及每一个box
                var wrap = document.getElementById(wrap);
                var boxs = getClass(wrap, box); //是个数组
                //  2.获得屏幕可显示的列数
                var boxW = boxs[0].offsetWidth; //拿到box的可视宽度
                console.log("box的可视宽度" + boxW);
                var colsNum = Math.floor(document.documentElement.clientWidth / boxW); //应该是可以放几列
                console.log("document.documentElement.clientWidth:" + document.documentElement.clientWidth + "       应该是可以放几列" + colsNum);
                wrap.style.width = boxW * colsNum + 'px'; //为外层赋值宽度
                //  3.循环出所有的box并按照瀑布流排列
                var everyH = []; //定义一个数组存储每一列的高度
                for (var i = 0; i < boxs.length; i++) {
                    if (i < colsNum) {
                        everyH[i] = boxs[i].offsetHeight;
                    } else {
                        var minH = Math.min.apply(null, everyH); //获得最小的列的高度
                        var minIndex = getIndex(minH, everyH); //获得最小列的索引
                        getStyle(boxs[i], minH, boxs[minIndex].offsetLeft, i);
                        everyH[minIndex] += boxs[i].offsetHeight; //更新最小列的高度
                    }
                }
            }
            /**
             * 获取类元素
             * @param  warp     [Obj] 外层
             * @param  className    [Str] 类名
             */
            function getClass(wrap, className) {
                var obj = wrap.getElementsByTagName('*');
                var arr = [];
                for (var i = 0; i < obj.length; i++) {
                    if (obj[i].className == className) {
                        arr.push(obj[i]);
                    }
                }
                return arr; //返回数组
            }
            /**
             * 获取最小列的索引
             * @param  minH  [Num] 最小高度
             * @param  everyH [Arr] 所有列高度的数组
             */
            function getIndex(minH, everyH) {
                for (index in everyH) {
                    if (everyH[index] == minH) return index;
                }
            }
            /**
             * 数据请求检验
             */
            function getCheck() {
                var documentH = document.documentElement.clientHeight;
                var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
                return documentH + scrollH >= getLastH() ? true : false;
            }
            /**
             * 获得最后一个box所在列的高度
             */
            function getLastH() {
                var wrap = document.getElementById('wrap');
                var boxs = getClass(wrap, 'box');
                return boxs[boxs.length - 1].offsetTop + boxs[boxs.length - 1].offsetHeight;
            }
            /**
             * 设置加载样式
             * @param  box  [obj] 设置的Box
             * @param  top  [Num] box的top值
             * @param  left     [Num] box的left值
             * @param  index [Num] box的第几个
             */
            var getStartNum = 0; //设置请求加载的条数的位置
            function getStyle(box, top, left, index) {
                if (getStartNum >= index) return;
                $(box).css({
                    'position': 'absolute',
                    'top': top,
                    "left": left,
                    "opacity": "0"
                });
                $(box).stop().animate({
                    "opacity": "1"
                }, 999);
                getStartNum = index; //更新请求数据的条数位置
            }
        </script>

    </head>

    <body>

        <section id="title">
            <h2>瀑布流效果的学习</h2>By Smile.
        </section>

        <div id="wrap">

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/1.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/2.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/3.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/4.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/5.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/6.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/7.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/8.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/9.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

            <div class="box">
                <div class="info">
                    <div class="pic"><img src="img/10.jpg"></div>
                    <div class="title"><a href="#">This is a title.</a></div>
                </div>
            </div>

        </div>

    </body>

</html>