jQuery 동적 로드 폭포 흐름 실현

jquery 폭포 흐름 실현,참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
사례 분석
4.567917.우선,그의 모든 그림 은 등 폭 이다4.567917.그 다음 에 첫 번 째 줄 의 정상 적 인 표 시 를 제외 한 나머지 그림 은 모두 이전 줄 에서 높이 가 가장 작은 그림 의 아래 에 나타난다4.567917.마지막 으로 가장 작은 그림 이 있 는 위치의 너비 와 높이 에 따라 절대적 인 포 지 셔 닝 을 결정 하여 그림 이 표시 하 는 위 치 를 설정 하 는 것 이다.
효과 도

실현 절차
html 구조

<div class="container">
 <div class="box">
 <div class="content"><img src="./image/1.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="content"><img src="./image/2.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="content"><img src="./image/3.jpg" alt=""></div>
 </div>

 </div>
</div>

css 스타일
구체 적 으로 모든 boxdiv 에 대해 부동 하고 스타일 을 설정 합 니 다.

* {
 padding: 0;
 margin: 0;
 }

 .box {
 position: relative;
 float: left;
 margin: 10px;
 }

 .content {
 padding: 15px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 10px;
 }

 .content img {
 width: 200px;
 height: auto;
 }

js(jquery)코드
주로 한 줄 의 높이 가 가장 작은 너비 와 높이 에 따라 절대적 인 포 지 셔 닝 을 설정 합 니 다.

<script>
 $(function () {
 //jQuery  
 imgLocation()
 
 function imgLocation() {
 var box = $('.box')
 var num = Math.floor($(window).width() / box.eq(0).width())
 var boxHeights = []
 box.each(function (index, value) {
 var boxHeight = box.eq(index).height()
 if (index < num) {
 boxHeights[index] = boxHeight
 } else {
 var minHeight = Math.min.apply(null, boxHeights)
 var minIndex = $.inArray(minHeight, boxHeights)
 $(value).css({
 'position': 'absolute',
 'top': minHeight,
 'left': box.eq(minIndex).position().left
 });
 boxHeights[minIndex] += box.eq(index).height()
 }
 })
 }
 })
</script>

마우스 스크롤 에 따라 그림 을 동적 으로 불 러 옵 니 다.
사례 분석
이곳 의 동 태 는 주로 동적 로드 데이터(위조 동태)를 모방 하 는 것 이다.

우선 마우스 가 굴 러 가 는 크기 와 인터페이스의 높이 에 따라 동적 로드 여 부 를 판단 합 니 다

4.567917.그 다음으로 데 이 터 를 방문 하고 동태 적 으로 jquery 데이터 유형 을 형성한다마지막 으로 생 성 된 데 이 터 를 추가 한.container 에 표시 합 니 다.
효과 도

실현 절차
html 와 css 코드 가 똑 같 습 니 다.여 기 는 중복 되 지 않 습 니 다.
js 코드
그림 데 이 터 를 언제 추가 할 지 판단 하고 새로 추가 한 후에 템 플 릿 에 삽입 하면 됩 니 다.
그 중의 dataImg 은 모방 한 가짜 데이터 입 니 다.

var dataImg = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] }
 window.onscroll = function () {
 if (scrollside()) {
 $.each(dataImg.data, function (index, value) {
 var html = `<div class="box">
 <div class="content"><img src="./image/${value.src}" alt=""></div>
 </div>`
 $(html).appendTo($('.container'))
 })
 imgLocation()
 }
 }
 function scrollside() {
 var box = $('.box')
 var lastboxHeight = box.last().get(0).offsetTop
 var documentHeight = document.body.scrollHeight + 130
 var scrollHeight = $(document).scrollTop()
 console.log(lastboxHeight, scrollHeight, documentHeight)
 return (lastboxHeight < scrollHeight + documentHeight) ? true : false
 }


oxHeight, scrollHeight, documentHeight)
 return (lastboxHeight < scrollHeight + documentHeight) ? true : false
 }

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.