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

时间: 2024-11-05 12:28:17

JS实现动态瀑布流及放大切换图片效果(js案例)的相关文章

jQuery8种不同的瀑布流懒加载loading效果

优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="grid"> <li><a href="#"><img src="/api/jq/5733e33ac28cb/images/5.jpg"></a></li> <li><a hre

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个

js实现无限瀑布流

瀑布流 是一种常见的网页布局方式,在许多网站中我们都能看到“瀑布流”的效果,其特征是有网页视窗有多个高度不同宽度相同的“块”组成.因其样式酷似飞流直下的瀑布, 故将这种布局方式称为瀑布流. 生活中瀑布流实例: 花瓣网 在css中我们学习过使用Multi-columns来实现瀑布流的效果 通过 Multi-columns 相关的属性 column-count.column-gap 配合 break-inside 来实现瀑布流布局. 现在,我来介绍一下如何通过js方式来实现瀑布流 <!DOCTYPE

原生 JS 实现一个瀑布流插件

瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探索之旅. 基础功能实现 首先我们定义好一个有 20 张图片的容器, <body> <style> #waterfall { position: relative; } .waterfall-box { float: left; width: 200px; } </style> </body>

基于jquery和knockout.js 写个瀑布流异步加载分页

<div class="list-view"> <ul> <li data-bind="foreach:datalst"> <div class="item border clearfix"> <div class="face fl"> <a target="_blank" data-bind="attr:{'title':user

jQuery瀑布流+无限加载图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } #contianer { position: relative; font-size: 0; margin: 0 auto; }

用CALayer实现淡入淡出的切换图片效果

由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合动画对多种动画进行组合, 实现更复杂的动画效果, 这里仅仅只是多添加了缩放效果为示例... 效果图: github:https://github.com/RinpeChen/changeImageWithAnimationByCALayer.git

ImageButton单击切换图片效果

转载请标明: http://blog.csdn.net/u012637501 我们平时在使用手机app时,常常会发现当我们按下某个按钮时相应按钮会发生变化,当我们松手时又恢复了原来的样子.或是,当你连续单击同一个按钮,会实现不同的功能.刚开始的时候感觉很神奇,那么现在我们来揭开她的面纱,经过下面的学习我相信你也可以轻轻松松将其拿下! 一.单击效果 首先看下将要实现的效果: Android为实现图片按钮按下的效果有两种方式可以实现:一是增加代码,二配置XML. 1.方式一:增加代码实现 (1)ma