我正在使用此处的代码创建一个合理的图库:http://jsfiddle.net/thirtydot/EDp8R/3/
我还使用infinitescroll加载更多项目。
当前的js:
$("#posts").infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav 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/qkKy8.gif'
}
},
function( newElements ) {
$( newElements ).each(function() {
$(this).css("width", $(this).width());
});
$('#posts').removeClass('posts').addClass('posts');
}
);
CSS:
#posts.posts{
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#posts.posts .post{
height: 250px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
#posts.posts:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
此代码适用于第一块加载的项目,但忽略了使用无限滚动
加载的项目已经尝试过这个(在另一个类似的帖子中找到答案):
$("head").append($('<style>div#posts:after { content: "";width:100%;display:inline-block;font-size:0;line-height:0; }</style>'));
答案 0 :(得分:0)
我找到了答案
每个新元素都应添加一个空格
刚刚添加了$(this).before(" ");
新的是:
$("#posts").infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav 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/qkKy8.gif'
}
},
function( newElements ) {
$( newElements ).each(function() {
$(this).before(" ");
$(this).css("width", $(this).width());
});
$('#posts').removeClass('posts').addClass('posts');
}
);