問題を言葉で説明する方法がわかりません。それでは、いくつかの写真をお見せしましょう:
同位体プラグインとページに 100 以上のサムネイルがあります。
- 青:ページサイズ
- 緑:メニュー
- 赤: フッター
- 灰色: サムネイル / ページ コンテンツ
すべてのサムネイルが読み込まれると、ページはすべてのブラウザーで次のようになります (すべて問題なく、ページはスクロール可能です)。
忙しい猫 http://phillip.com.pl/sample/inne/defaulf-no-filter.jpg
サムネイルがアイソトープでフィルター処理され、親指が数個しか残っていない場合、ページはIEとFirefoxで次のように表示されます(すべて問題ありません。ページはスクロールできず、フッターはページの下部にあります)。
忙しい猫 http://phillip.com.pl/sample/inne/ff-ie-filter.jpg
最後に、サムネイルがアイソトープでフィルタリングされ、わずかな親指しか残っていない場合、ページはChromeで次のように表示されます(レイアウトは適切ですが、ページはアイソトープ フィルタの前と同じようにスクロール可能です)。
忙しい猫 http://phillip.com.pl/sample/inne/chrome-filter.jpg
これはクロムのバグですか、それとも js/css ファイルを確認する必要がありますか?
同位体のすべてのjsがあります:
<script src="/assets/js/jquery.isotope.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $container = $('#grid-items');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.pin',
layoutMode : 'fitRows',
getSortData : {
name : function( $elem ) {
return $elem.find('.name').text();
},
votescore : function( $elem ) {
return parseInt( $elem.find('.votescore').text(), 10 );
},
popularity : function( $elem ) {
return parseInt( $elem.find('.views').text(), 10 );
},
commentscount : function( $elem ) {
return parseInt( $elem.find('.comments_link').text(), 10 );
}
}
});
});
// SORTING:
$('#sort-by a').click(function(){
var sortBool;
if($(this).find('i.icon-down_arrow').length != 0){
if ($(this).hasClass('selected')) {
$(this).find('i').removeClass('icon-down_arrow');
$(this).find('i').addClass('icon-up_arrow');
if($(this).hasClass('class_text')){
sortBool = true;
}else{
sortBool = false;
}
}else{
if($(this).hasClass('class_text')){
sortBool = false;
}else{
sortBool = true;
}
}
}else{
if ($(this).hasClass('selected')) {
$(this).find('i').removeClass('icon-up_arrow');
$(this).find('i').addClass('icon-down_arrow');
if($(this).hasClass('class_text')){
sortBool = false;
}else{
sortBool = true;
}
}else{
if($(this).hasClass('class_text')){
sortBool = true;
}else{
sortBool = false;
}
}
}
var sortName = $(this).attr('href').slice(1);
$('#sort-by a').each(function() {
$(this).removeClass('selected');
});
$(this).addClass('selected');
$container.isotope({
sortBy : sortName,
sortAscending : sortBool
});
return false;
});
// FILTERING:
$('#filters a').click(function(){
$('#filters a').each(function() {
$(this).removeClass('selected');
});
$(this).addClass('selected');
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
</script>