masonry 瀑布流布局滑动到底部加载更多

来源：互联网发布：彩影软件怎么样编辑：程序博客网时间：2024/05/17 01:59
<!DOCTYPE html>    <html>      <meta charset="utf-8"/>      <title>瀑布流动画效果</title>      <head>          <style>              #Books{                  width: 500px;                  height: auto;                  margin: 0 auto;              }              .container-fluid {                  padding: 20px;              }              .box {                  margin-bottom: 20px;                  float: left;                  width: 220px;              }              .box img {                  max-width: 100%              }          </style>      </head>      <body>      <div id="Books">          <div id="masonry" class="container-fluid">              <div class="box"><img src="1.jpg"></div>              <div class="box"><img src="2.jpg"></div>              <div class="box"><img src="4.jpg"></div>              <div class="box"><img src="4.jpg"></div>              <div class="box"><img src="5.jpg"></div>              <div class="box"><img src="10.jpg"></div>              <div class="box"><img src="7.jpg"></div>              <div class="box"><img src="8.jpg"></div>              <div class="box"><img src="9.jpg"></div>              <div class="box"><img src="10.jpg"></div>              <div class="box"><img src="11.jpg"></div>              <div class="box"><img src="12.jpg"></div>              <div class="box"><img src="4.jpg"></div>              <div class="box"><img src="4.jpg"></div>              <div class="box"><img src="5.jpg"></div>              <div class="box"><img src="11.jpg"></div>              <div class="box"><img src="12.jpg"></div>              <div class="box"><img src="8.jpg"></div>              <div class="box"><img src="9.jpg"></div>              <div class="box"><img src="10.jpg"></div>              <div class="box"><img src="1.jpg"></div>              <div class="box"><img src="2.jpg"></div>              <div class="box"><img src="4.jpg"></div>              <div class="box"><img src="4.jpg"></div>              <div class="box"><img src="5.jpg"></div>              <div class="box"><img src="10.jpg"></div>              <div class="box"><img src="7.jpg"></div>              <div class="box"><img src="8.jpg"></div>              <div class="box"><img src="9.jpg"></div>              <div class="box"><img src="10.jpg"></div>          </div>      </div>           <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>        <script src="jquery.masonry.min.js"></script>          <script type="text/javascript">              var $container = $('#masonry');              $container.imagesLoaded(function() {                  $container.masonry({                itemSelector: '.box',  /*选定那些使用瀑布流布局*/                    gutterWidth: 20,                      isAnimated: true  /*启用动画效果*/                });              });              $(window).scroll(function(){                  var scrollTop = $(this).scrollTop();var scrollHeight = $(document).height();var windowHeight = $(this).height();                  if(scrollTop + windowHeight == scrollHeight){             $('#masonry').append('<div class="box"><img src="1.jpg"></div><div class="box"><img src="2.jpg"></div><div class="box"><img src="8.jpg"></div> <div class="box"><img src="4.jpg"></div><div class="box"><img src="5.jpg"></div><div class="box"><img src="10.jpg"></div><div class="box"><img src="7.jpg"></div><div class="box"><img src="8.jpg"></div><div class="box"><img src="9.jpg"></div><div class="box"><img src="10.jpg"></div>');                      $container.masonry('reload');                  }              })          </script>      </body>      </html>
查看源码：
1 0