javascript - 这种布局如何无限滚动加载，与behance.net相似

问题描述

问 题

进入时展示30个li，滚轮距离底部50px时自动加载更多，每次加载8个，使用什么组件好？以及如何使用

以下为代码：

<ul class="tag-web">
    <li>
        <a href="#" target="_blank">
            <div class="web-content">
                <div class="web-content-top">
                    <div class="web-logo"></div>
                </div>
                            
                <div class="web-content-bottom"></div>
            </div>
        </a>
    </li> 
    
    <li>
        <a href="#" target="_blank">
            <div class="web-content">
                <div class="web-content-top">
                    <div class="web-logo"></div>
                </div>
                            
                <div class="web-content-bottom"></div>
            </div>
        </a>
    </li> 
    
    <li>
        <a href="#" target="_blank">
            <div class="web-content">
                <div class="web-content-top">
                    <div class="web-logo"></div>
                </div>
                            
                <div class="web-content-bottom"></div>
            </div>
        </a>
    </li> 
</ul>   
                
                

解决方案

1基于jquery框架的masonry与infinitescroll两款瀑布流插件 百度一大把无限分页加载插件 jquery.infinitescroll.min.js
2.ajax分页加载

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="http://jq22.qiniudn.com/masonry-docs.min.js"></script>

<div id="masonry" class="container-fluid">
  <div class="box"><img src="http://jq22.com/images/1.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/2.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/3.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/4.jpg"></div>
  <div class="box"><img src="http://jq22.com/images/5.jpg"></div>
  ...
</div>

.container-fluid {
  padding: 20px;
  }
.box {
  margin-bottom: 20px;
  float: left;
  width: 220px;
  }
  .box img {
  max-width: 100%
}

$(function() {
    var $container = $('#masonry');
    $container.imagesLoaded(function() {
        $container.masonry({
                itemSelector: '.box',
                gutter: 20,
                isAnimated: true,
            });
     });
});

这篇关于javascript - 这种布局如何无限滚动加载，与behance.net相似的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！