JS實現動態瀑布流及放大切換圖片效果(js案例)

整理了一下當時學js寫的一些案例，再次體驗了一把用原生JS實現動態瀑布流效果的樂趣，如今把它整理出來，須要的小夥伴能夠參考一下。

該案例主要是用HTML+CSS控制樣式，經過JS實現全局瀑布流以及點擊圖片放大、上下切換效果。HTML佈局寫的很簡單，圖片加載主要是在JS中經過訪問自定義的JSON字符串來實現。
動態瀑布流的原理簡單理解就是把新須要加載的圖片放在上一排總高度最小的圖片或模塊下面，實現良莠不齊的多欄佈局效果。
具體效果以下：

 

作這個案例我用了以前本身封裝的框架，因此小夥伴須要到個人另外一篇文章裏面本身下載，連接：https://www.cnblogs.com/xyyl/p/10912037.html

**HTML代碼：**

<template id="temp">
    <div>
        <figure>
            <img src="{{img}}">
            <p>{{info}}</p>
        </figure>
    </div>
</template>
<template id="temp1">
    <img src="{{src}}">
    <p>{{info}}</p>
    <aside>
        <a href="##" class="prev">上一張</a>
        <a href="##" class="next">下一張</a>
    </aside>
</template>
<section id="box" class="box"></section>
<div id="show_big" class="show_big">
    <img src="images/w_1.jpg">
    <p id="txt">這是詳細內容</p>
    <aside>
        <a href="##" class="pre">上一張</a>
        <a href="##" class="next">下一張</a>
    </aside>
</div>
<div class="mask" id="mask"></div>
<span id="show" class="show"></span>

　　

**css代碼：**

*{
margin: 0;
padding: 0;
}
section.box{
margin: 0 auto;
position: relative;
font-size: 0;//行塊取消間距
}
section.box div{
width: 200px;
padding: 14px 7px 0;
box-sizing: border-box;
/*float: left;*/

display: inline-block;
vertical-align: top;
}
section.box div figure{
border: 1px #cccccc solid;
border-radius: 4px;
padding: 10px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
}
section.box div figure img{
width: 100%;
}
section.box div figure p{
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
span.show{
position: fixed;
bottom: 0;
}
div.show_big{
background-color: #f2f2f2;
border-radius: 4px;
position: fixed;
padding: 10px;
top: 50px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
display: none;
z-index: 100;
}
div.mask{
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(101, 101, 101, 0.28);
display: none;
}
div.show_big img{
border-radius: 3px;
}
div.show_big p{
font-size: 13px;
color: #666666;
text-indent: 2em;
line-height: 17px;
margin-bottom: 10px;

overflow : hidden;/*多行文本省略號*/
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
div.show_big aside{
display: flex;
justify-content: space-around;
}
div.show_big a{
display: inline-block;
padding: 5px 13px;
background-color: #318fff;
color: white;
line-height: 17px;
text-decoration: none;
border-radius: 2px;
}

　　

**JS代碼:**

var data=[
        {src:'images/w_1.jpg',info:'描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容描述內容'},
        {src:'images/w_2.jpg',info:'描述內容'},
        {src:'images/w_3.jpg',info:'描述內容'},
        {src:'images/w_4.jpg',info:'描述內容'},
        {src:'images/w_5.jpg',info:'描述內容'},
        {src:'images/w_6.jpg',info:'描述內容'},
        {src:'images/w_7.jpg',info:'描述內容'},
        {src:'images/w_8.jpg',info:'描述內容'},
        {src:'images/w_9.jpg',info:'描述內容'},
        {src:'images/w_10.jpg',info:'描述內容'},
        {src:'images/w_11.jpg',info:'描述內容'},
        {src:'images/w_17.jpg',info:'描述內容'}
    ];
    var data1=[
        {src:'images/w_4.jpg',info:'描述內容'},
        {src:'images/w_5.jpg',info:'描述內容'},
        {src:'images/w_6.jpg',info:'描述內容'},
        {src:'images/w_7.jpg',info:'描述內容'},
        {src:'images/w_8.jpg',info:'描述內容'},
        {src:'images/w_9.jpg',info:'描述內容'},
        {src:'images/w_17.jpg',info:'描述內容'}
    ];
    var json={data,data1};//這裏是圖片數據
    var img_w=200;
    var len;
    var box=sEO.$('#box');
    resize();
    function resize() {
        //len:每排顯示的圖片數目
        len=parseInt((window.innerWidth-17)/img_w);
        box.style.width=len*img_w+'px';//瀑布流總的寬度
    }
    var temp=sEO.$('#temp').innerHTML;
    function load_img(arr) { //動態添加圖片
        var str='';
        arr.forEach(function (el,i) {
            str+=temp.replace('{{img}}',el.src).replace('{{info}}',el.info);
        });
        box.innerHTML+=str;
    }
    load_img(data);//自動加載圖片帶HTML中

    var divs=sEO.$('#box div');
    function isComplete(els,fun) {//判斷圖片是否所有加載完成，完成以後才執行回調函數fun
        var  flag=true;//設置一個標誌，flag=true表示全部圖片加載完成
        els.forEach(function (div,i) {
            var img=div.getElementsByTagName('img')[0];
            if (!img.complete)flag=false;//表示存在圖片加載未完成
            return false;
        });
        if (flag)fun();
    }
    function water(oarr) {//瀑布流具體實現
        var arr=[];
        var timer=setInterval(function () {
            isComplete(oarr,function () {
                clearInterval(timer);
                oarr.forEach(function (div, i) {
                    if (i<len){
                        arr.push(div.offsetHeight);//把第一排div的高儲存起來
                    }else {//經過div的left和top決定div的位置
                        var min_h=Math.min.apply(null,arr);//求上一排總高度的最小值
                        var index=arr.indexOf(min_h);//求最小高度那一列的下標
                        div.style.cssText=`position: absolute;left: ${index*img_w}px;top: ${arr[index]}px;`;
                        arr[index]+=div.offsetHeight;//儲存的當前添加圖片的那一列的高度改變
                    }
                })
            })
        },100);
    }
    water(divs);
    var j_len=json.length,j=1;
    var show=sEO.$('#show');
    window.onscroll=function () {
        var div_e=divs[divs.length-1];
        var h=div_e.offsetHeight;
        var top=div_e.offsetTop;
        if (sEO.getScroll(document).top+window.innerHeight>h/2+top){
            if (j<j_len){ //當最後半屏圖片即將顯示完時
                load_img(data1); //動態添加數據
                divs=sEO.$('#box div');
                water(divs);
                j++;
            }else {//當導航條滑動到最後時提示，頁面到底
                show.innerText='我是有底線的噢';
                show.style.left=(window.innerWidth-show.offsetWidth)/2+'px';
            }
        }else {
            show.innerText='';
        }
    };
    divs=sEO.$('#box div');
    window.onresize=function () {//瀏覽器窗口發生變化，瀑布流排列調整
        resize();
        water(divs)
    };
    divs.forEach(function (div,i) {//未每張圖片添加自定義屬性i
        div.i=i;
    });
    /*到這裏動態瀑布流結束，
    接下來是點擊圖片放大及上下切換效果實現*/


    var temp1=sEO.$('#temp1').innerHTML;
    var show_big=sEO.$('#show_big');
    var info=sEO.$('#txt');
    var mask=sEO.$('#mask');
    var index,txt,show_imgW;
    sEO.agent(box,'img','click',function () {//爲每張圖片添加事件代理
        show_big.style.display='block';
        src=this.getAttribute('src');
        txt=this.nextElementSibling.innerHTML;
        public_b();
        mask.style.display='block';
        index=this.parentNode.parentNode.i; //當前點擊的圖片位置
    });
    sEO.agent(show_big,'a','click',function () {
        //爲左右圖片切換按鈕添加時間代理
        var cls=this.className;
        cls==='prev'?index--:index++;
        index=index===-1?(divs.length-1):index;/*圖片循環加載*/
        index=index===divs.length?0:index;
        src=divs[index].children[0].children[0].getAttribute('src');/*點擊以後圖片路徑*/
        txt=divs[index].children[0].children[1].innerHTML;/*點擊以後圖片描述內容*/
        public_b()
    });
    var show_img,max_h;
    function public_b() {
        show_big.innerHTML=temp1.replace('{{src}}',src).replace('{{info}}',txt);

        show_img=show_big.children[0];
        // var img_h=show_big.children[0].offsetHeight;
        max_h=window.innerHeight-140;
        // if (img_h>max_h)img_h=max_h;
        show_img.style.height=max_h+'px';

        show_imgW=show_big.children[0].offsetWidth;
        show_big.style.width=show_imgW+'px';
        info.style.width=show_imgW-20+'px';
        show_big.style.left=(window.innerWidth-show_imgW)/2+'px';
        show_img.onclick=mask.onclick=hidden;
    }
    function hidden() {
        show_big.style.display='';
        mask.style.display='';
        this.onclick=null;
    }

　　

原文出處：https://www.cnblogs.com/xyyl/p/10912030.html