javascript - 这种布局如何无限滚动加载，与behance.net相似-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

ringa_lee 2017-04-10 17:15:09

[JavaScript讨论组]

464

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

以下为代码：

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

ringa_lee

全部回复(2)

高洛峰2017-04-10 17:17:09 2楼

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>

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

.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,
            });
     });
});