ajax 와 js 폭포 흐름 레이아웃 실현

폭포 흐름 레이아웃 이란 브 라 우 저 에서 미 끄 러 지면 더 많은 그림 을 불 러 올 수 있 습 니 다. 코드 는 다음 과 같 습 니 다.


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            margin: 0 auto;
            /*width: 1204px;*/
            position: relative;
        }
        .box{
            padding: 5px;
            float: left;
            background-color: pink;
        }
        .box .box_img{
            padding: 5px;
            border: 1px solid palevioletred;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        .box img{
            width: 150px;
        }
    style>
head>
<body>
<script>
    window.onload = function () {
        var boxArr = document.getElementsByClassName('box');
        var container = document.getElementById('container');
        var boxHeightArr = [];
//        console.log(box.offsetWidth);

        //           
        function checkFlag(boxHeightArr) {
            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
//            console.log(scrollTop);
            var pageHeight = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
//            console.log(pageHeight);
            if (scrollTop + pageHeight > Math.min.apply(null, boxHeightArr)) {

                return true;
            }
        }

        //             
        function getMinHeightIndex(arr, minHeight) {
            for (var index = 0; index < arr.length; index++) {
                if (arr[index] === minHeight) {
                    return index;
                }
            }
        }

        function imgLocation(container, content, boxHeightArr) {
            var clientWidth = document.documentElement.clientWidth;
            var boxWidth = content[0].offsetWidth;
            //floor              
            var cols = Math.floor(clientWidth / boxWidth);
//            console.log(cols);
            container.style.width = boxWidth * cols + "px";

            for (var i = 0; i < content.length; i++) {
                var boxHeight = content[i].offsetHeight;
                if (i < cols) {
                    //         
                    //           ，       
                    boxHeightArr[i] = boxHeight;
                } else {
                    //         
                    var minBoxHeight = Math.min.apply(this, boxHeightArr);
                    //           
                    var minBoxIndex = getMinHeightIndex(boxHeightArr, minBoxHeight);
                    //                      
                    content[i].style.position = 'absolute';
                    content[i].style.top = minBoxHeight + 'px';
                    content[i].style.left = minBoxIndex * boxWidth + 'px';
                    //  :        ,                          
                    boxHeightArr[minBoxIndex] += boxHeight;
                }
            }
        }

        imgLocation(container, boxArr, boxHeightArr);

        //     ajax    ,        


        window.onscroll = function () {
            if(checkFlag(boxHeightArr)){
                console.log("         ");
                var imgData = {
                    "data" :[{"src" : "1.jpg"},{"src" : "2.jpg"},{"src" : "3.jpg"},{"src" : "8.jpg"},{"src" : "6.jpg"}]
                };
                var data = imgData.data;
                for(let item of data){
                    var newBox = document.createElement('div');
                    newBox.className = 'box';
                    container.appendChild(newBox);
                    var newBoxImage = document.createElement('div');
                    newBoxImage.className = 'box_img';
                    var img = document.createElement('img');
                    img.src = "../img/"+item.src;
                    newBoxImage.appendChild(img);
                    newBox.appendChild(newBoxImage);
                }
                imgLocation(container, boxArr, boxHeightArr);
            }
        }
    }
script>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="../img/1.jpg" alt="">
            div>
        div>

        <div class="box">
            <div class="box_img">
                <img src="../img/2.jpg" alt="">
            div>
        div>

        <div class="box">
            <div class="box_img">
                <img src="../img/3.jpg" alt="">
            div>
        div>

        <div class="box">
            <div class="box_img">
                <img src="../img/4.jpg" alt="">
            div>
        div>

        <div class="box">
            <div class="box_img">
                <img src="../img/5.jpg" alt="">
            div>
        div>

        <div class="box">
            <div class="box_img">
                <img src="../img/6.jpg" alt="">
            div>
        div>

        <div class="box">
            <div class="box_img">
                <img src="../img/7.jpg" alt="">
            div>
        div>

        <div class="box">
            <div class="box_img">
                <img src="../img/8.jpg" alt="">
            div>
        div>

        <div class="box">
            <div class="box_img">
                <img src="../img/9.jpg" alt="">
            div>
        div>
    div>
body>
html>

대체적인 사고방식 은 첫 번 째 줄 의 그림 을 통 일 된 너비 로 배열 한 다음 에 높이 가 가장 작은 그림 을 선별 하 는 것 이다. 두 번 째 줄 의 첫 번 째 그림 은 높이 가 가장 작은 그림 에 보충하고 두 번 째 그림 은 높이 가 두 번 째 작은 그림 에 보충한다. 이렇게 순서대로 배열 하고 브 라 우 저의 스크롤 이 벤트 를 감청 하여 끊임없이 그림 을 불 러 오 는 것 을 실현 한다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

js div 드래그 호 환 i / fireforx js 마우스 위치 깊이 분석

이벤트 속성 은 이벤트 가 실 행 될 때 브 라 우 저 페이지 (클 라 이언 트) 에 대한 수직 좌 표를 되 돌려 줍 니 다. 이 두 속성 은 이벤트 가 실 행 될 때 마우스 포인터 가 브 라 우 저 페이지 (클 라...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ajax 와 js 폭포 흐름 레이아웃 실현

좋은 웹페이지 즐겨찾기