0

我正在使用此处的代码创建一个合理的画廊:http: //jsfiddle.net/thirtydot/EDp8R/3/

我还使用无限滚动来加载更多项目。

当前的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>'));
4

1 回答 1

0

我找到了答案每个新元素都应该添加一个空格刚刚添加它$(this).before("&nbsp;");

新的是:

$("#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("&nbsp;");
                $(this).css("width", $(this).width());
            }); 
            $('#posts').removeClass('posts').addClass('posts');
}
); 
于 2013-04-25T08:48:58.753 回答