滚动加载的瀑布流效果

需要jq的支持哦 也可以自己写原生js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    ul{
        width:300px;float:left;margin:10px;
    }
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
    //随机数
    function ran(n,m){
        return parseInt(Math.random()*(m-n)+n);
    }
    //创造Li标签
    function createLi(){
        var oLi=$('<li></li>')
        oLi.css({'height':ran(200,500)+'px','background':'rgb('+ran(0,256)+','+ran(0,256)+','+ran(0,256)+')'})
        return oLi
    }
    //核心编程
    $(function(){
        var aUl=$('ul');
        var arr=[];
        function create30Li(){
            for(var i=0;i<30;i++){
            var oLi=createLi();
            for(var j=0;j<aUl.length;j++){
                arr.push(aUl[j]);
            }
            arr.sort(function(a,b){
                return a.offsetHeight-b.offsetHeight;
            })
                arr[0].appendChild(oLi[0]);
            }
        }
        create30Li();
        //滚动加载
        $(window).scroll(function(){
            var scrollT=document.documentElement.scrollTop || document.body.scrollTop;
            var clientH=document.documentElement.clientHeight;
            var bodyH=document.body.scrollHeight;
            if(scrollT+clientH>bodyH-200){
                    create30Li()
            }
        })
    })
</script>
</head>
<body>
    <div>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>  
</body>
</html>

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 161,750评论 24 692
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 8,009评论 4 43
  • 正则表达式的引擎分析 正则表达式的引擎有两个特点:1.默认情况下都是贪婪匹配。2.引擎总是着急的,会返回最先匹配到...
    种谔阅读 2,567评论 1 3
  • 杭州培森教育:名校留学生告诉你雅思之路该怎么走! 去年培森教育的陈同学成功申请到了英国老牌名校——格拉斯哥大学,开...
    杭州培森教育阅读 183评论 0 0
  • 戳我听音频 我们每个人都去过不同的城市,在这些城市里遇见不同的人,发生不同的故事,但是,只有那么一座城市让你心心念...
    是年阅读 113评论 0 1
  • 嘉宾简介:顾中一, 知名营养师。北京友谊医院营养师,北京营养师协会理事,高圆圆私人营养师。专栏作者,新浪微博知名博...
    鹏有约阅读 837评论 0 1
  • 走在乡间的小路上 路边的野花还挺香 你的家乡是否也有一条小河在流淌 你有多久没有看到过露珠上的晨光? 在你心中是否...
    开心就好_8375阅读 147评论 7 13