간단한 폭포수 흐름 효과(본체 직접 작성)_jquery

나는 할 일이 없기 때문에 스크립트 나 웹 페이지를 작성하는 개인적인 습관은 다른 사람들의 결과를 언급하고 다른 사람들의 코드를 거의 언급하지 않습니다 소스 코드를 보는 것보다 코드. 이것이 좋은 습관인지 모르겠습니다. 중간 과정에는 많은 시간이 걸렸지 만, 나는 내가 만든 모든 세부 사항을 기억할 수 있습니다 (물론 나중에 잊어 버릴 것입니다).

폭포 흐름의 주체는 새로 추가 된 요소가 현재 UL의 높이에 따라 Li의 형태로 선택적으로 삽입됩니다.
주체 형태는 다음과 같습니다.

코드 복사 코드 코드는 다음과 같습니다. div id = "main"& lt; Img/& gt;/lt; div; ; IMG/LT; & lt; ul Class = "pics"& lt; div; /div & gt; & lt;/li & gt; & lt; div; & gt; & lt; img/& gt;/lt;/lt; ;/lt;/lt; ..../lt;

코드는 다음과 같습니다. 10px; 우주;



코드 복사 코드
코드는 다음과 같습니다. // alert ($ (Window) .Height (); 현재 창 문서 알림 ($ (document.body) .Height ()); // 브라우저의 현재 창에서 문서 본체의 총 높이에는 테두리 패딩 마진 경보 ($ (창) .width ()); 브라우저 알림의 현재 창 ($ (document) .width ()); 🎜> // 브라우저 알림의 현재 창에서 문서 본문의 높이 ($ (document.body) .outerwidth (true)); 브라우저에는 테두리 패딩 마진 $ (document) .scroll (function () { var pics = $ ( ". pics"); $ ( "#float"). 텍스트 (sc); 맨 아래 = pic. u '(math .round (math.random () * 20901) 19968) .ToString (16)' '); & gt;}
}
});
});

이것은 기본적으로 가장 간단한 폭포 흐름을 구현하지만 스크립트는 메모리 소비, 즉 무한 하중 문제를 고려하지 않습니다. 나는 지금 그것을 이해하지 못한다. 나중에 개선 할 것이다. 효과를 보자 :