瀑布流加载图片

这个效果大家见过很多了在百度搜索图片的时候下面补上我学习的制作这个的过程当然图片是从别的地方抓取的或者在数据库中读取的我这里只是放在了一个json里面作为表示。废话不多说上代码

css部分
 <title>瀑布流效果</title>
  <style type="text/css">
    *{margin:0;padding:0;}
    body{background:#f3f2f3;}
    .pic{width:1000px;margin:0 auto;}
    .pic .list{width:248px;text-align:center;float:left;}
  </style>
   <link type="text/css" rel="stylesheet" href="css/animate.min.css">

HTML部分
<body onload="initLoad();">


     <div class="pic">
        <div class="list"></div>
        <div class="list"></div>    
        <div class="list"></div>
        <div class="list"></div>        
     </div>

jq部分
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script type="text/javascript">
        var json = [
        {"src":"images/1.jpg","alt":"豪车","height":"340"},
        {"src":"images/2.jpg","alt":"豪车","height":"310"},
        {"src":"images/3.jpg","alt":"豪车","height":"360"},
        {"src":"images/4.jpg","alt":"豪车","height":"340"},
        {"src":"images/5.jpg","alt":"豪车","height":"330"},
        {"src":"images/6.jpg","alt":"豪车","height":"340"},
        {"src":"images/7.jpg","alt":"豪车","height":"360"},
        {"src":"images/8.jpg","alt":"豪车","height":"340"},
        {"src":"images/9.jpg","alt":"豪车","height":"360"},
        {"src":"images/10.jpg","alt":"豪车","height":"340"},
        {"src":"images/11.jpg","alt":"豪车","height":"340"},
        {"src":"images/12.jpg","alt":"豪车","height":"345"},
        {"src":"images/13.jpg","alt":"豪车","height":"336"},
        {"src":"images/14.jpg","alt":"豪车","height":"340"},
        {"src":"images/15.jpg","alt":"豪车","height":"340"},
        {"src":"images/16.jpg","alt":"豪车","height":"331"}
        ];

        //循环迭代图片数组,解析json对象
        function initLoad(){
            for(var i = 0;i < json.length;i++){
                var car = "";
                car+= '<div class="car animated bounceIn">';
                car+= '<img src="'+json[i].src+'" width="240" height="'+json[i].height+'" alt="'+json[i].alt+'" />';
                car+= '</div>';
                //调用方法 拼接对象上去
                getListDiv($(".list")).append(car);
            };  
        };

        //获取list div 对象，进行不规则布局
        function getListDiv(obj){
            //获取总列数
            var length = obj.length; 
            //高度无穷大
            var h = Infinity;
            //获取每一列
            var getList;
            for(var i = 0;i < length;i++){
                //如果当前列小于无穷大 就无线循环
                if(obj.eq(i).height() < h){
                    h = obj.eq(i).height();
                    getList = obj.eq(i);
                }
            }
            return getList;
        };

        //滚动条的高度
        var scrollHeight = 0;
        //滚动条距离顶部的高度
        var scrollTop = 0;
        //页面一加载就执行此函数
        $(function(){
            //浏览器的高度
            var _height = $(window).height();
            //鼠标滚动事件
            $(window).scroll(function(){
                scrollHeight = document.body.scrollHeight;
                scrollTop = document.body.scrollTop;
                //滚动条+浏览器的高度 大于
                if(scrollTop + _height >= scrollHeight){
                    initLoad();
                }
            });
        });
     </script>

好了大功告成!oye

猜你喜欢