게 으 른 로드 와 폭포 흐름 배치

그림 게 으 름 로드 의 실현 원 리 를 약술 하 다.
원리: img 태그 의 src 링크 를 같은 그림 (빈 그림) 으로 설정 하고 실제 그림 주 소 를 img 태그 의 사용자 정의 속성 (예 를 들 어 data - src) 에 저장 합 니 다.js 가 이 그림 요소 가 시각 창 에 들 어 가 는 것 을 들 었 을 때 속성 에 있 는 주 소 를 src 속성 에 저장 하여 게 으 른 로 딩 효 과 를 얻 을 것 입 니 다.
이렇게 하면 페이지 가 한꺼번에 서버 에 대량의 요청 에 응답 하여 서버 응답 이 느 리 고 페이지 가 끊 기거 나 붕괴 되 는 문 제 를 방지 할 수 있다.
폭포 흐름 구조의 실현 원 리 를 약술 하 다.
폭포 흐름 구 조 는 pinterest. com 사이트 에서 최초 로 만 들 었 다. 그 원 리 는 먼저 한 줄 에 몇 개의 요 소 를 수용 할 수 있 는 지 계산 한 다음 에 각 열 에 있 는 모든 요소 의 높이 와 최소 자 를 찾 고 새로운 요 소 를 이 열 에 추가 한 다음 에 모든 열 에 있 는 요소 의 합 을 계속 찾 아 이 열 에 추가 하 는 것 이다. 이렇게 순환 하면모든 요소 가 요구 에 따라 배열 할 수 있 을 때 까지;
나무통 구조의 실현 원리 약술 (선택 가능)
레 퍼 런 스

나무통 구조의 원리 와 실현

높이 가 같 고 너비 가 다른 구조 방식 을 나무통 구조 라 고 한다.그것 은 각 줄 의 그림 높이 가 일치 하 는 몇 가지 뚜렷 한 특징 이 있다.줄 마다 그림 이 꽉 찼 다.구조 함수 로 대상 을 만 드 는 방식 으로 이 코드 를 쓰 고 약정 한 구조 함수 의 이니셜 을 대문자 로 쓰 도록 주의 하 세 요.새로운 대상 을 만 든 다음 구조 함수 의 역할 영역 을 새로운 대상 에 게 부여 하고 구조 함수 의 방법 을 호출 합 니 다.
함수 명 은 배럴 로 나무통 을 뜻 합 니 다.그리고 어떤 속성 과 방법 이 있 는 지 확인 해 야 합 니 다.사고 절 차 를 이해 하 는 전제 에서 어떤 속성, 방법 과 그들의 역할 이 필요 한 지 구상 할 수 있다.
속성:
각 줄 그림 의 높이 고정: rowHeight, 줄 높이
고정 용기 가 있 습 니 다: DOM 대상, 용기 이름 은. ct 입 니 다.줄 용기 와 그림 용기 도 있어 야 하지만 이 두 용기 의 내용 수량 이 고정 되 지 않 아 레이아웃 할 때 만 듭 니 다.
줄 용기 너비: width, ct 너비 가 져 오기
각 줄 의 그림 을 저장 하 는 배열: imgArr [].불 러 온 그림 을 이 배열 에 눌 러 서 줄 이 폭 을 초과 하 는 지 판단 합 니 다.
방법:
소재 이미지 보유: getImgUrls () 방법 으로 이미지 링크 를 가 져 오 거나 데이터베이스 에서 그림 을 가 져 옵 니 다.여 기 는 방문 을 통 해서...https://placeholder.com/ 사이트 에서 코드 를 가 져 옵 니 다. 구체 적 으로 다음 과 같이 그림 정 보 를 불 러 옵 니 다. loadImg () 방법 으로 그림 정 보 를 불 러 옵 니 다. 렌 더 링 그림 대기 열: render () 는 그림 의 비례 크기 를 바 꾸 고 한 줄 에 몇 개의 그림 을 놓 을 수 있 는 지 계산 합 니 다. layot () 는 크기 를 바 꾼 그림 을 페이지 에 놓 습 니 다.append 는 대응 하 는 DOM 요소 노드 에 있 습 니 다.구체 적 인 관 계 는 앞의 부자 관계 에 대응 하면 된다.
어떻게 요소 가 사용자 의 시야 에 나타 나 는 것 을 판단 합 니까?
사용자 의 시야 에 새로운 그림 이 들 어 올 때 만 두 가지 상황 을 판단 합 니 다. (1) 창, 창 스크롤 과 요소 가 창 상단 의 오프셋 높이 를 가 져 오고 요소 가 창 시각 범위 에 나타 나 는 지 계산 합 니 다.

       function isShow($el){
      var winH = $(window).height(),//      
            scrollH = $(window).scrollTop(),//        
            top = $el.offset().top;//              
      if(top < scrollH + winH){
          return true;//     
        }else{
          return false;//      
        }
      }

     （ ）        ，            ;

    $(window).on('scroll', function(){//      
        checkShow();
    })
    checkShow();
    function checkShow(){//            
        $('img').each(function(){//       
            var $cur = $(this);
            if(!!isloaded($cur)){return;}//       
            if (isShow($cur)) {
              setTimeout(function(){
                showImg($cur);
                },300)//              
            };
        });
    }

(3) 요소 가 표 시 될 때 이전의 기본 사진 을 data - src 의 사진 으로 바 꿉 니 다.

    function showImg($el){
        $el.attr('src', $el.attr('data-src'));
        $cur.data('isloaded',true);
    }

브 라 우 저가 맨 아래로 굴 러 가 는 것 을 어떻게 판단 합 니까?

                ，    DOM      ，
    scrollTop     Y       。
    clientHeight          。
    scrollHeight       

    //    Y       
    function getScrollTop(){
    　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    　　if(document.body){
    　　　　bodyScrollTop = document.body.scrollTop;
    　　}
    　　if(document.documentElement){
    　　　　documentScrollTop = document.documentElement.scrollTop;
    　　}
    　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    　　return scrollTop;
    }

    //      
    function getScrollHeight(){
    　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    　　if(document.body){
    　　　　bodyScrollHeight = document.body.scrollHeight;
    　　}
    　　if(document.documentElement){
    　　　　documentScrollHeight = document.documentElement.scrollHeight;
    　　}
    　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    　　return scrollHeight;
    }

    //        
    function getWindowHeight(){
    　　var windowHeight = 0;
    　　if(document.compatMode == "CSS1Compat"){
    　　　　windowHeight = document.documentElement.clientHeight;
    　　}else{
    　　　　windowHeight = document.body.clientHeight;
    　　}
    　　return windowHeight;
    }
    function touchedBottom(){
    if(getScrollTop() + getWindowHeight() == getScrollHeight()){
    　　　　console.log("you are in the bottom!");
    　　　　return true;
    　　}else{
    return false;
    }
    };

과정 중의 그림 게 으 름 로드 효 과 를 실현 하 다.
git 미리 보기:https://ouyangbeibei.github.io/project/layout.md/lazyLoad.md/lazyLoad.html
과정 에서 폭포 흐름 의 구조 효 과 를 실현 하 다.
jsbin 미리 보기:http://jsbin.com/dicafopefu/edit?html,output
폭포 흐름 뉴스 사 이 트 를 실현 하고 GitHub 프로젝트 주소 와 프로젝트 미리 보기 링크 조회 효 과 를 답장 합 니 다.
퀘 스 트 요구:

Github 에 프로젝트 waterfall - sinanews

를 만 듭 니 다.

프로젝트 구조

jsbin 미리 보기:http://jsbin.com/ruguwuvomo/edit?html, output git 코드 주소:https://github.com/ouyangbeibei/project/tree/master/layout.md/waterfall-sinanews.md