瀑布流点击载入很多其它（记住tomcat下启动，做过瀑布流的大家预计都知道为啥）

废话不多说。直接上代码：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制作图片瀑布流点击button载入很多其它内容-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>
时间： 2024-11-05 06:10:41

瀑布流点击载入很多其它（记住tomcat下启动，做过瀑布流的大家预计都知道为啥）的相关文章

RecyclerView实现底部载入很多其它功能

这两天在公司没有什么任务分配,就研究了下咱们Google在Android5.0 推出的一个用来取代ListView的列表控件----RecyclerView. 发现功能上确实比ListView强大了不少,可扩展性也增强了不少. 可是使用过RecyclerView的Programmers应该都知道,RecyclerView无法直接代码加入头布局和脚布局. 那么他喵的怎么样实现最经常使用的底部载入很多其它数据呢?带着这种疑惑我在StackOverFlow上搜索到了一个有參考价值的答案并写了一个Dem

Android实现RecyclerView的下拉刷新和上拉载入很多其它

需求 先上效果图, Material Design风格的下拉刷新和上拉载入很多其它. 源代码地址(欢迎star) https://github.com/studychen/SeeNewsV2 假设对于RecyclerView还不熟悉,參见这篇 Android Material Design学习之RecyclerView取代 ListView 本文链接 http://blog.csdn.net/never_cxb/article/details/50759109 转载请注明出处 下拉刷新 效果图

封装RecyclerViewAdapter实现RecyclerView下拉刷新上拉载入很多其它

实现 关于下拉刷新使用的是github上的项目Ultra Pull To Refresh项目. gradle依赖例如以下: compile 'in.srain.cube:ultra-ptr:1.0.11' 重点是上拉载入很多其它的实现.因为RecyclerView并不支持加入HeardView与FooterView,因此我们仅仅能自 己实现. 首先定义一些局部变量 public static final int STATE_LOAD = 0; public static final int ST

js实现点击按钮实现上一张下一张相册滚动效果

/****判断图片是否构成滚动效果*/$(function(){    if($("#bar").find('img').size()*71<=$("#bar").width()){           $("#table_img").width($("#bar").find('img').size()*71);    }    if($("#bar").find('img').size()*71&g

很多时候运行tomcat 的时候总是会提示tomcat 的端口被占用 但是任务管理器里面还找不到是哪个端口被占用了 因此很多人就重新配置tomcat 或者去修改tomcat的端口号 ，其实这么做太麻烦了 ，小弟在这里告诉你一个非常简单的方法。 1.在开始菜单中选择运行 然后输入cmd 进入DOS界面。显示如下： 2.在Dos窗口中输入netstat -ano|findst

很多时候运行tomcat 的时候总是会提示tomcat 的端口被占用 但是任务管理器里面还找不到是哪个端口被占用了 因此很多人就重新配置tomcat  或者去修改tomcat的端口号 ,其实这么做太麻烦了 ,小弟在这里告诉你一个非常简单的方法. 1.在开始菜单中选择运行  然后输入cmd  进入DOS界面.显示如下: 2.在Dos窗口中输入netstat   -ano|findstr  8080(注意的 我的Tomcat 的断口号 是8080 你的断口号是多少就写多少) 输入完成后回车 会弹出下

瀑布流 ajax 预载入 json

pbl.json[模拟后台json数据]: [ { "id": "511895", "title": "Smashicons: 300 Free Icons | GraphicBurger", "referer": "http://graphicburger.com/smashicons-300-free-icons/", "url": "http://ww

thinphp下拉获取更多瀑布流效果

html页面 <body> <script type="text/javascript" src="/pubuliu/public/Js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/pubuliu/public/Js/jquery.masonry.min.js"></script&g

使用OnScrollListener回调处理自己主动载入很多其它

首先来分析下OnScrollListener的回调. new OnScrollListener() { boolean isLastRow = false; @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { //滚动时一直回调,直到停止滚动时才停止回调.单击时回调一次. //firstVisibleItem:当前能看见

怎么点击div之外的区域就隐藏这个div啊 找了很久，都没有很好解决

方法一. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body> <span onClick="with(document.getElementById(