01.gif

  1.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2.     <style>
  3.         *{margin:0;padding:0}
  4.         img{
  5.             width:240px
  6.         }
  7.         .item{
  8.             border:1px solid #eee;
  9.             padding:20px;
  10.             float:left
  11.         }
  12.     </style>
  14.     <div class="content">
  15.         <div class="item">
  16.             <img src="images/01.jpg" alt="">
  17.         </div>
  18.         <div class="item">
  19.             <img src="images/02.jpg" alt="">
  20.         </div>
  21.         <div class="item">
  22.             <img src="images/03.jpg" alt="">
  23.         </div>
  24.         <div class="item">
  25.             <img src="images/04.jpg" alt="">
  26.         </div>
  27.         <div class="item">
  28.             <img src="images/05.jpg" alt="">
  29.         </div>
  30.         <div class="item">
  31.             <img src="images/06.jpg" alt="">
  32.         </div>
  33.         <div class="item">
  34.             <img src="images/07.jpg" alt="">
  35.         </div>
  36.         <div class="item">
  37.             <img src="images/08.jpg" alt="">
  38.         </div>
  39.         <div class="item">
  40.             <img src="images/09.jpg" alt="">
  41.         </div>
  42.         <div class="item">
  43.             <img src="images/10.jpg" alt="">
  44.         </div>
  45.         <div class="item">
  46.             <img src="images/11.jpg" alt="">
  47.         </div>
  48.         <div class="item">
  49.             <img src="images/12.jpg" alt="">
  50.         </div>
  51.     </div>
  53.  <script>
  54.         /* 1.一排能放置几张图片 */
  55.         window.onload=function(){
  56.             var ww=$(window).width();
  57.             var itemWidth=$(".item").outerWidth()  
  58.             console.log(itemWidth)  
  59.             var num=Math.floor(ww/itemWidth)   
  60.             console.log(num)
  61.             /* 2.将第一排的高度添加到一个数组中 */
  62.             var heightArr=[];
  63.             $(".item").each((index,item)=>{
  64.                 if(index<num){
  65.                     var item=$(item).outerHeight()
  66.                     heightArr.push(item)
  67.                 }else{
  68.                     /* 3.从数组高度最小的地方添加图片 */
  69.                     var minHeight=Math.min(...heightArr);  //最小高度
  70.                     console.log(minHeight)
  71.                     var minIndex=heightArr.indexOf(minHeight);
  72.                     var offsetLeft=$(".item").eq(minIndex).offset().left;  //最小高度的item距离左边的偏移量
  73.                     $(".item").eq(index).css({position:'absolute',top:minHeight,left:offsetLeft})
  74.                 }
  75.                 /* 4.重新设置数组的最小高度 */
  76.                 var height=$(".item").eq(index).outerHeight();
  77.                 heightArr[minIndex]=minHeight+height;
  78.             })
  79.         }
  81.     </script>

判断是否到达底部

  1. function onReachBottom() {
  2.             var sh = $(window).scrollTop();
  3.             var wh = $(window).height();
  4.             var dh = $(document).height();
  5.             return Math.ceil(sh + wh) == dh ? true : false;
  6. }

加载更多

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  10.     <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
  11.     <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
  12.     <style>
  13.         * {
  14.             margin: 0;
  15.             padding: 0
  16.         }
  18.         .grid-item img {
  19.             width: 200px;
  20.             padding: 5px;
  21.         }
  23.         .grid-item {
  24.             float: left;
  25.             border: 1px solid #eee;
  26.             border-radius: 5px;
  27.         }
  29.         .grid {
  30.             width: 80%;
  31.             margin-left: auto;
  32.             margin-right: auto;
  33.         }
  35.         .more {
  36.             position: fixed;
  37.             bottom:5%;
  38.             left:50%;
  39.             z-index: 100;
  40.             text-align: center;
  41.             color:red;
  42.         }
  43.     </style>
  44. </head>
  46. <body>
  47.     <div class="grid">
  48.         <p class="more">加载更多数据</p>
  49.     </div>
  50.     </div>
  51.     <script>
  52.         var url = 'http://yapi.demo.qunar.com/mock/66515/images'
  53.         /* init data */
  54.         loadMore();
  56.         $(window).scroll(function(){
  57.             if(isReachBottom()){
  58.                 loadMore()
  59.             }
  60.         })
  62.         function http(url) {
  63.             return $.ajax({
  64.                 url,
  65.                 type: 'get',
  66.                 dataType: 'json',
  67.                 beforeSend() {
  68.                     $(".more").show()
  69.                 }
  70.             })
  71.         }
  73.         function handleData(res) {
  74.             var html = ""
  75.             $.each(res, (index, item) => {
  76.                 html += `<div class="grid-item"><img src='${item.imgUrl}' /></div>`;
  78.             })
  79.             $('.grid').append(html); //加载你的ajax数据到列表
  80.             var $grid = $('.grid').masonry({
  81.                 itemSelector: '.grid-item',
  82.                 gutter: 10,
  83.                 isAnimated: true
  84.             });
  85.             $grid.imagesLoaded().progress(function () {
  87.                 $grid.masonry('reloadItems'); //初始化
  88.                 $grid.masonry('layout'); //重新布局
  89.             });
  90.             $('.more').hide()
  92.         }
  94.         function loadMore() {
  95.             http(url).then(res => {
  96.                 handleData(res)
  97.             })
  98.         }
  100.         function isReachBottom() {
  101.             var dh = $(document).height();
  102.             var wh = $(window).height();
  103.             var sw = $(window).scrollTop();
  104.             return (Math.ceil(wh + sw) == dh) ? true : false;
  105.         }
  106.     </script>
  107. </body>
  109. </html>