Jquery 반응 레이아웃 float 애니메이션

Question

나는 무언가를 찾고 있는데 그것이 무엇인지 불려지거나 necceracry 정보를 찾을 수있는 곳을 모른다.

http://ricklancee.com/jquery-layout

^ 그래서 내가 지금 가지고하면이 내 나는 (240 픽셀) 및 플로트 고정으로 요소의 수를 배치 한 100 % 폭 (현재 브라우저 폭)와 래퍼와 웹 사이트입니다 : 왼쪽; 창을 작게 만들면 서로 아래에 자기를 배치합니다.

그들이 서로 아래에 떠있을 때 내가 원하는 것은 - 그리고 뒤로 - 그 위치로 움직입니다.

http://masonry.desandro.com/은 창 크기를 조정할 때 요소가 새 위치로 플로팅/애니메이션 적용되는 예제를 보여줍니다.

아무에게도이 작업이 어떻게 수행되는지,이 기술을 호출하는 방법 또는이 작업을 수행하는 방법을 어디에서 찾을 수 있습니까?

나는 플러그인을 사용하지 않고 교육 목적으로 직접 스크립트를 작성합니다.

는 브라우저가 그런 종류의 물건을 처리하는 플로트와 함께 당신에게

Answer 1

, 대단히 감사합니다.

직접하고 싶다면 복잡해질 것입니다.

절대적으로 div를 배치해야합니다. position: absolute; - 부모 div가 position: relative;인지 확인한 다음 리스너를 추가하여 resize 이벤트를 감시하고 resize 이벤트가 호출되면 div의 새 위치를 계산합니다.

참조 : http://api.jquery.com/resize/

이 실제로 그들의 새로운 가정에 애니메이션을 쉽게입니다 - 단지 $(....).animate({top: xx, left: xx}). 어려운 부분은 그들이 어디로 가야하는지 계산할 것입니다.

물론 가능합니다.

resize 이벤트를 바인드 할 때 .one()을 사용하면 한 번만 호출됩니다. 그런 다음을 추가하면 1/2 초 동안 실제 계산이 지연됩니다. 그리고 위치를 계산하고 움직입니다.

애니메이션이 완료되면 이벤트를 다시 바인드하십시오. 그 전에 바인딩하지 않거나 여러 애니메이션을 동시에 실행해야합니다. 애니메이션을 만들 div가 여러 개 있기 때문에 모든 애니메이션이 아닌 하나의 애니메이션에만 바인딩하십시오.