砌体不使用ajax和无限滚动
目前我正在使用AJAX从我们的Web服务中提取数据。 我遇到的问题是它不想将数据加载到砌体布局中， .social_block所有内容.social_block在下一个下面浮动一个（并且我没有为这些设置任何浮点数）。 所以砌体不起作用:(
我希望发生以下情况：在砌体布局中从webservice加载初始项目，在“无限”滚动中，它将使来自Web服务的分页请求将新项目附加到砌体布局中。
所以问题如下：
– 为什么我的web服务项目没有使用砌体加载而只是加载到页面左侧？
– 如何使用我现有的AJAX请求使用无限滚动，以便使用我现有的分页代码将新数据输入到砌体布局中（首先请求加载http://example.com/自动，第二个请求加载http：第一次无限滚动时为//example.com/1 ,第二次无限滚动时第三次请求http://example.com/2 ，等等）？
作为一个补充说明，如果我在行$container.imagesLoaded(function(){之前添加一个alert而不是console.log $container.imagesLoaded(function(){它似乎减慢了速度但是然后将初始请求加载到砌体格式 – 很奇怪！
$(function(){ var $container = $('#container'); //alert('Masonry loads items in the nice layout if I do this'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.block', columnWidth: 100 }); }); $container.infinitescroll({ navSelector : '#loadmore', // selector for the paged navigation nextSelector : '#more', // selector for the NEXT link (to receive next results) itemSelector : '.block', // selector for all items to retrieve loading: { finishedMsg: 'No more pages to load.', img: 'http://sofzh.miximages.com/javascript/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 }); $container.masonry( 'appended', $newElems, true ); }); } ); // set here so it is in reach var page = 0; // this will call the required url with new json data. function loadPage(page) { var url = 'http://example.com/' + page; $.getJSON(url, function(data) { var cont = $('#container'); $.each(data.data, function(index, obj) { var item = obj.Message; cont.append( $('', {"class": "block"}).append( $('', {"class": item.Type}).append( $('', {"class":"post_image"}).append( $('![]()
', {src:item.postImageLarge}) ) ) ) ) ) }); //$.each(data.data, function(key, val) { console.log('Data key: ', key, ', Value: ', val)}); }); } // load more handler $('#more').click(function(){ page = page + 1; loadPage(page); //load more items }); // initial run with page empty loadPage(''); });