html - jQuery reinitiate css :after on div after jquery function terminated -
i creating justified gallery using code here: http://jsfiddle.net/thirtydot/edp8r/3/
i use infinitescroll load more items.
current js:
$("#posts").infinitescroll({ navselector : '#page_nav', // selector paged navigation nextselector : '#page_nav a', // selector next link (to page 2) itemselector : '.item', // selector items you'll retrieve loading: { finishedmsg: 'no more pages 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 }
this code works fist chunk of loaded items, ignores items loaded infinite scroll
already tried (found answer in similar post):
$("head").append($('<style>div#posts:after { content: "";width:100%;display:inline-block;font-size:0;line-height:0; }</style>'));
i found answer each new element should have space added added $(this).before(" ");
new is:
$("#posts").infinitescroll({ navselector : '#page_nav', // selector paged navigation nextselector : '#page_nav a', // selector next link (to page 2) itemselector : '.item', // selector items you'll retrieve loading: { finishedmsg: 'no more pages 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'); } );