위치가있는 동위 원소 그리드 아이템 : relative

Question

컨텍스트

무한의 스크롤 로딩으로 동위 원소 그리드 레이아웃을 만들고 싶습니다.

요구

나는 부모 요소 .grid-item 관련 position: absolute과의 자식 요소를 배치하기 위해 .grid-item에 상대적인 위치를 제공해야합니다.

<div class="grid"> 
    <article class=".grid-item" ?> <!-- position: relative --> 
    <img>       <!-- position: absolute --> 
    <h2>       <!-- position: absolute --> 
    </article> 
</div> 

무한 스크롤 부하 후 문제

는 콜백 새로운 그리드 항목 레이아웃을 정렬 해고 : $('.grid').isotope('reloadItems').isotope(); 그러나이 항목은 이전 그리드 항목을 오버랩하는 용기 .grid의 상단에 위치한다. 이 동작은 .grid-item에 정적 위치를 지정하는 것으로 고정되어 있지만, 실제로 설명한대로 상대 위치가 필요합니다.

질문 상대적 위치 동위 원소가 .grid-item 작업을 얻을 수있는 방법이 있습니다

?

이 모든 코드 코멘을 만드는 방법을 모르겠지만 여기에는 프로젝트의 임시 URL이 나와 있으므로이 동작을 보여줍니다. 무한 스크롤로드 한 후, 새 항목은 .grid 용기의 상부로 이동 :

https://stage.e451.net/

감사합니다!

if (viewportWidth>=768) { 
$('.grid').isotope('reloadItems').isotope(); 
}; 

그래서, 동위 원소 후 새로운 그리드 항목을 관리하지 않았다 :

는

Answer 1

또 다른 "내 잘못"대답 :(

동위 원소에 대한 콜백은, 무한 스크롤 로딩 후하는 viewportWidth 변수 선언 부족 이 작품 :

var viewportWidth = $(window).width(); 
if (viewportWidth>=768) { 
$('.grid').isotope('reloadItems').isotope(); 
};