这种布局如何无限滚动加载，与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
条回答
写回答
-
IT从业
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, }); }); });2019-07-17 19:31:37赞同 展开评论
相关问答