滚动加载的瀑布流效果

作者: BrightenSun | 来源:发表于2017-06-12 12:35 被阅读0次

滚动加载的瀑布流效果
瀑布流_懒加载_ajax结合使用
瀑布流、木桶布局
自定义UICollectionViewLayout-瀑布流效果、
新闻瀑布流懒加载
瀑布流div版
Jquery 瀑布流（滚动加载）
花瓣网瀑布流（滚动加载）采集思路详解
vue上拉加载List 列表
常见小效果整理（瀑布流、懒加载）

需要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>