js瀑布流，简单封装

来源：互联网发布：mac照片找不到编辑：程序博客网时间：2024/06/05 17:10

一个很简单的瀑布流加载，当滚动条滚动到底部时自动加载，先代码敬上

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>demo</title></head><style>    li{        list-style: none;    }    .pinterest-wrap{        overflow: hidden;        width: 1200px;        padding: 20px;        margin: 0 auto;        border : 1px solid #ddd;    }    .pinterest-wrap ul{        width: 200px;        float: left;    }    .pinterest-wrap ul li{    }</style><body>    <div class="pinterest-wrap">    </div>    <script src="../jquery-1.12.2.min.js"></script>    <!-- // <script src="pinterest.js"></script> -->    <script>        (function($){            $.fn.pinterest = function(options){                var self = $(this);                var isLoading = false; //是否正在加载                init();//初始化                getData();// 创建初始数据          function init(){            options = $.extend({},$.fn.pinterest.defaults,options || {});            for(var i=0;i<options.ulLength;i++){                console.log(self)                self.append("<ul></ul>")            }          };          function creatBox(){//创建盒子            var li = $("<li></li>");            var height = Math.random()*300 + 1;            function num(){                return Math.round(Math.random()*225);            }            rgb = "rgb("+ num() +"," + num() + ","+num()+")";            li.height(height);            li.css("background-color",rgb)            return li;          };          function getData(){//加载数据            // isLoading = true;            for(var i=0;i<options.pagesize;i++){                ulList = self.find("ul");                var tagUl = ulList.eq(0);                ulList.each(function(i){                    if($(this).height() < tagUl.height()){                        tagUl = $(this);                    }                })                tagUl.append(creatBox());            }          };          window.onscroll = function(){ //滚动加载更多数据            var _scT = document.documentElement.scrollTop ||document.body.scrollTop;            var _scH = document.documentElement.scrollHeight || document.body.scrollHeight            var _cH = document.documentElement.clientHeight || document.body.clientHeight ;            if( _scT >=_scH-_cH - options.bottomHeight){              // if(flag){              //   $(".main .nomore").show().find("p").html("没有更多内容了");              //   return false;              // }              // if(!isLoading){                getData();              // }            }          }            }            $.fn.pinterest.init = function(){                options = $.extend({},$.fn.pinterest.defaults,options || {});        for(var i=0;i<options.ulLength;i++){            console.log(self)            self.append("<ul></ul>")        }            }            $.fn.pinterest.defaults = {                ulLength : 4,  //列表ul                pagesize : 10, //分页                page : 0,                bottomHeight : 0 //滚动条距离底部距离            }        })(jQuery)        $(".pinterest-wrap").pinterest({            ulLength : 2        });    </script></body></html>

ulLength 是展示的列表数量
pagesize 是分页数
bottomHeight 是滚动条距离底部距离，有时候我们加载时不需要在最底下才进行加载，默认为0；
这只是一个很简单的动态加载，实际工作中需要对creatBox()进行修改，根据业务需求来制作相应的瀑布流。

0 0