isotope
ユーザーがサイトの一番下に到達したときに、とinfinite-scroll
スクリプトを組み合わせて、より多くのデータをロードします。
var $ = jQuery,
$container = $('#content.grided .wrap #gridcontainer');
if ( $container.length > 0 ) {
$container.isotope({
itemSelector : '.grid-item',
masonry : {
columnWidth : 240
}
});
//enable infinity scroll
$container.infinitescroll({
navSelector : '#posts_navi', // selector for the paged navigation
nextSelector : '#posts_navi a.previous_posts', // selector for the NEXT link (to page 2)
itemSelector : '.grid-item', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);
}
要素が dom に追加された後、いくつかの動作を追加するために、それらの要素に対してのみ jQuery スクリプトを実行したいと思います。
$('#gridcontainer .grid-item').each(function(){
var $this = $(this),
$overlay = $this.find('span.overlay');
$this.hover(
function(){
$this.addClass('hovered');
$overlay.stop().hide().fadeIn('100');
},
function(){
$this.removeClass('hovered');
$overlay.stop().show().fadeOut('100');
}
);
}
が使用されている最初のスクリプトのコールバック関数でそれを行う必要があることは知っていますisotope
append
が、どのように正しく行う必要がありますか?