0
Q
砌体和滚动页面
A
回答
0
我已使用Masonry与Infinite Scroll plugin。它很容易实现。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/33213779/jquery.masonry.min.js"></script>
<script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js"></script>
<script>
$(function(){
var $grid = $('#posts');
$grid.imagesLoaded(function(){
$grid.masonry({
itemSelector : '.item',
columnWidth: 250
});
});
$grid.infinitescroll({
navSelector : '#footer', // selector for the paged navigation
nextSelector : '#footer a', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function(newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$grid.masonry('appended', $newElems, true);
});
}
);
});
</script>
相关问题
- 1. 无限滚动砌体页面在滚动后失去格式
- 2. 无限滚动+砌体
- 3. jQuery砌体无限滚动
- 4. 砌体+无限滚动和PrettyPhoto灯箱
- 5. jQuery的砌体和无限滚动
- 6. 掌握jQuery和砌体无限滚动
- 7. jQuery砌体和无限滚动标题
- 8. 砌体,FlexSlider和无限滚动
- 9. 砌体JQuery的滚动动画
- 10. 砌体和砌体砖类
- 11. jQuery的砌体无限滚动设立
- 12. 砌体的无限滚动不工作
- 13. 砌体+无限滚动+锚点
- 14. 砌体+ Infintine滚动实施问题
- 15. 无限滚动脚本无法在标记的页面上工作? [砌体]
- 16. 砌体无限滚动不同下一页
- 17. 砌体运行迟了页面渲染
- 18. 砌体+高级Ajax页面加载器
- 19. Ajax和砌体
- 20. 以特定速度滚动时的砌体和无限滚动破坏布局
- 21. toggleClass无限滚动和砌体加载后的奇怪行为
- 22. Imagesnt不工作与无限Ajax滚动和砌体
- 23. 无限滚动砌体和imagesloaded装载不好(tumblr)
- 24. 滚动到具体页面,使用CGPDF
- 25. 滚动页面
- 26. jQuery砌体和CSS3
- 27. jQuery砌体和WordPress
- 28. 砌体,ImagesLoaded和InfiteAjaxScroll
- 29. 砌体高度的砌体
- 30. jQuery无限滚动+砌体+ CSS媒体查询+ n-child
没有答案,但你可能想试试[Isotope](http://isotope.metafizzy.co)。这是Masonry稍微聪明的兄弟,并且我个人发现它更容易定制和添加功能。 – giorgio