「石積み」効果を得るためにjquery isotopeを使用していますが、問題があります。
まず、アイテムのリスト全体が最初に左側に真っ直ぐにロードされ、次にそれ自体が修正されますが、それが行われていることがはっきりとわかり、1秒ほどそこにとどまることがあります.
2 番目の問題は、ロードされたアイテム (一度に 56 個) のページを下に移動すると、互いに重なることがあります。「さらに表示」をクリックすると(inf-scroll twitterメソッドを使用)、それらは自動的に修正され、新しいアイテムの下部で再び重複します。
ご覧のとおり、imagesloaded プラグインを試していますが、違いはありません。
これは同位体のコードと設定です。
var $container = $('#wall');
$container.imagesLoaded(function(){
// isotope
$container.isotope({
itemSelector : '.wrap_indiv',
transformsEnabled: false,
getSortData: {
name: function($element) {
return $element.data('name');
},
site: function($element) {
return $element.data('site');
},
date_added: function($element) {
return $element.data('date_added');
}
}
});
// filter items when filter link is clicked
$('#options a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
// infinite scroll
$container.infinitescroll({
navSelector : "#page_nav",
// selector for the paged navigation (it will be hidden)
nextSelector : "#page_nav a",
// selector for the NEXT link (to page 2)
itemSelector : ".wrap_indiv",
// selector for all items you'll retrieve
behavior: "twitter",
loading : {
'finishedMsg' : 'No more to load.',
'img' : '/images/icons/loading_sml.gif',
'selector' : '#wall'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'insert', $( newElements ) );
}
);
});
なぜこれらが起こっているのですか?