기본 JavaScript LESS는 Waterfall flow_javascript 기술을 구현합니다.

HTML(js 호출을 용이하게 하려면 패키지 관계에 주의)

코드 복사 코드는 다음과 같습니다.

 
    

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

    

 본문>

LESS(덜预编译)

复主代码 代码如下:

 * {
     여백: 0;
     패딩: 0;
 }
 #메인 {
     위치: 상대;
 
 }
 .box {
     패딩:15px 0 0 15px;
     부동:왼쪽;
 }
 .pic {
     패딩: 10px;
     테두리: 1px 실선 #ccc;
     테두리 반경: 5px;
     상자 그림자: 0px 0px 5px #ccc;
     img {
         너비:165px;
         높이:자동;
     }
 }

자바스크립트(자바스크립트)

(函数存재일정瑕疵,仅用于school习理解)

复主代码 代码如下:

window.onload = 함수() {
Waterfall("메인","박스");
//기본 함수 아래의 각 상자 요소에 대해 사용자 정의 함수를 호출합니다.
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
//json 데이터를 시뮬레이션합니다.
​​ Window.onscroll = 함수() {
             if (checkScrollSlide) {
//사용자 정의 함수를 호출하고 함수 반환 값을 기반으로 스크롤이 범위를 벗어났는지 확인합니다.
            var oParent = document.getElementById("main");
for (var i = 0; i                 var oBox = document.createElement("div");
                  oBox.className = "box";
                    oParent.appendChild(oBox);
//상자 블록 생성
                var oPic = document.createElement("div");
                   oPic.className = "사진"
oBox.appendChild(oPic);
//사진 블록 생성
                var oImg = document.createElement("img");
//img 요소 생성
                 oImg.src = "images/" dataInt.data[i].src;
//이미지 참조 설정;
oPic.appendChild(oImg);
             };
Waterfall("메인","박스");
// 동적으로 생성된 데이터 블록을 스트리밍 방식으로 레이아웃합니다.
          };
};
};
//스트리밍 레이아웃의 주요 기능으로 데이터 블록의 위치를 ​​자동으로 조정합니다.
함수 폭포(부모, 상자) {
// 기본 아래의 모든 상자 요소를 제거합니다. "parent"는 상위를 나타내고 box는 상자 요소를 나타냅니다. var oParent = document.getElementById(부모);
//부모 요소를 변수 oParent에 할당합니다.
var oBoxs = getByClass(oParent,box);
//사용자 정의 함수를 통해 상위 항목 아래의 각 상자 요소를 가져옵니다.
//구입된 상자 요소 세트를 oBox에 다시 할당합니다(범위 문제로 인해 변수는 공유되지 않음).
// console.log(oBoxs.length);
//디버깅을 위해 콘솔의 상자 요소 수를 인쇄합니다.
var oBoxW = oBoxs[0].offsetWidth;
//각 열의 너비를 계산합니다. offsetWidth는 패딩을 포함한 너비입니다. // console.log(oBoxW)
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//전체 페이지에 표시되는 열 수(페이지 너비/상자 너비)를 계산합니다.
oParent.style.cssText = "너비:" oBoxW*cols "px;margin:0 자동";
//상위 요소의 너비 main = 각 열의 너비 * 열 수; 왼쪽과 오른쪽을 중심으로 합니다. var hArr = [];
//각 열의 높이를 저장하는 배열;
for (var i = 0; i //oBox 배열을 탐색합니다.
If (i // 첫 번째 줄의 첫 번째 열이
인 조건은 다음과 같습니다.hArr.push(oBoxs[i].offsetHeight);
//각 열의 높이를 가져와서 배열에 넣습니다.
          }그 외{
//여기의 상자 요소는 더 이상 첫 번째 행의 요소가 아닙니다.
            var minH = Math.min.apply(null,hArr);
//첫 번째 행의 최소 높이를 구해 변수에 할당합니다.
                        // console.log(minH);
            var index = getMinhIndex(hArr,minH);
//이 변수의 인덱스 값을 얻기 위해 사용자 정의 함수를 호출합니다.
              oBoxs[i].style.position = "절대";
oBoxs[i].style.top = minH "px";
               oBoxs[i].style.left = oBoxW*index "px";
//현재 요소의 위치를 ​​설정합니다.
//현재 요소의 왼쪽 값 = 최상위 요소의 인덱스 값 * 각 열의 너비
//oBoxs[i].style.left = oBoxs[index].offsetLeft "px";
//두 번째 방법은 현재 요소의 왼쪽 값을 가져오는 것입니다.
//이때 인덱스 컬럼에 box 요소가 추가됩니다.
hArr[index] =oBoxs[i].offsetHeight;
//각 열의 업데이트된 높이 = 각 열의 원래 높이와 나중에 추가된 상자 요소의 높이;
          };
};
};
//JS는 기본적으로 Class를 통해 요소를 얻습니다.
함수 getByClass(부모,claName) {
//클래스를 통해 요소 가져오기(상위 상위 컨테이너 아래의 claName 요소 가져오기)
var boxArr = new Array();
//얻은 모든 요소를 ​​클래스 상자에 저장할 배열을 선언합니다.
var oElements = parent.getElementsByTagName("*")
//이 상위 요소 아래에 모든 하위 요소를 저장하는 변수를 선언합니다(*);
for (var i = 0; i //oElements 배열을 탐색합니다.
If (oElements[i].className==claName) {
//배열에 있는 요소의 calss 클래스가 매개변수 claName과 동일한 경우;
               boxArr.push(oElements[i]);
// 순회된 상자 요소를 boxArr 배열로 분류합니다.
          };
};
반품 상자Arr;
//배열을 호출한 후 일련의 함수를 탐색하여 얻은 배열을 호출 함수에 반환합니다. };
//배열 요소의 인덱스 값을 가져옵니다.
함수 getMinhIndex(arr,val) {
//arr은 상위 배열이고, val은 현재 요소입니다. for(var i in arr){
//0부터 탐색 시작;
If(arr[i]==val){
//배열의 현재 요소에 해당하는 인덱스 값을 찾습니다.
               i를 반환합니다.
//함수의 반환 값은 현재 요소의 인덱스 값입니다.
          };
};
};
//롤링 데이터 블록 로딩 조건이 충족되는지 확인합니다.
함수 checkScrollSlide() {
var oParent = document.getElementById("main");
var oBoxs = getByClass(oParent,"box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//페이지 상단에서 마지막 상자 요소의 높이(마지막 상자의 offsetTop 찾기(oBoxs.lenght-1))
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//브라우저 스크롤바의 스크롤 거리;
// console.log(scrollTop);
var height = document.body.clientHeight || document.documentElement.clientHeight;
//브라우저 뷰포트 높이;
// console.log(높이);
반환(lastBoxH //페이지의 스크롤 거리가 마지막 상자 요소의 offsetTop보다 큰지 여부;
};

요약:

폭포 흐름을 사용하여 사진을 표시하는 것보다 더 좋은 것은 없습니다. 다음은 폭포 흐름의 구현 방법입니다(각 줄의 길이는 브라우저 창의 길이와 같습니다). 매우 간단합니다. Google을 검색하면 알 수 있습니다.
내 생각은 그림을 하나씩 삽입하는 것입니다. 이 행에 있는 그림의 가로 세로 비율이 변경되지 않고 높이가 250보다 낮으면 사이클이 완료됩니다. 즉, 이 행이 삽입됩니다.
그런 다음 다음 루프를 입력하여 다음 행을 삽입합니다.