벽돌과 무한 스크롤이 특정 속도로 스크롤 할 때 레이아웃을 바꿉니다.

Question

유체 폭 테마가 있고 jQuery Masonry와 Infinite Scroll을 사용하고 있습니다. 문제는 특정 속도 (너무 빠르지 않고 너무 느리지 않음)에서 페이지를 스크롤하면 그리드가 손상 될 수 있다는 것입니다. 난 단지 두 개의 열이 파이어 폭스에서 이것을 보았다 :

사람은 이런 일이 이유를 알고? 나는 그것이 많은 것들이 될 수 있다는 것을 압니다. 그러나 누군가가 이것에 대한 경험이 있고 그것이 무엇이 진행되고 있는지를 아는 것이 크게 도움이된다면.

업데이트 : 페이지의 마지막 게시물 바로 다음에 나누기가 발생합니다. 뒤따라 오는 것들은 무한 스크롤의 콜백에 의해 생성됩니다.

Answer 1

글쎄, 보려는 페이지 (그리고 이미지를 사용할 수 없음)에서 링크가 보이지는 않지만, 과거의 벽돌을 사용한 경험에서 볼 때, 페이지 크기에 큰 변화가있을 때마다 (크기 조정, 스크롤링 재 크기의 div의) 당신이 다시 트리거해야합니다

jQuery(document).ready(function() { 
    jQuery("#somediv").click(function() { 
     jQuery('#leftcol').toggle(700); //div resizing start here 
     jQuery('#somediv2').toggleClass("minside"); 
     jQuery('#somediv').toggleClass("full"); // evoke again after change.. 
     jQuery('#container').masonry({ 
      itemSelector : '.item', 
      columnWidth : 240 
     }); 
    }); 
}); 

Answer 2

무한 스크롤 및 문제가 사라질 것입니다에 대한 콜백으로이 추가 ... 적어도 나를 위해 작동 :

// trigger Masonry as a callback 
function (newElements) { 
    // hide new items while they are loading 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    // ensure that images load before adding to masonry layout 
    $newElems.imagesLoaded(function() { 
     // show elems now they're ready 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
    }); 

}); 

확인 당신이 그것을 바꾼 경우를 대비하여 $container.