> 웹 프론트엔드 > JS 튜토리얼 > 간단한 폭포수 흐름 효과(본체 직접 작성)_jquery

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

WBOY
풀어 주다: 2016-05-16 17:33:18
원래의
1097명이 탐색했습니다.

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

폭포 흐름의 주체는 새로 추가 된 요소가 현재 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;}
}
});
});

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿