2020-09-16---js实现五星好评效果&放大镜效果&瀑布流

最新推荐文章于 2020-12-09 10:32:45 发布
最新推荐文章于 2020-12-09 10:32:45 发布
阅读量329 收藏 3
点赞数 1
分类专栏： H5
本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。
本文链接：https://blog.csdn.net/qq_45021462/article/details/108631097
版权

五星好评效果&放大镜效果&瀑布流

五星好评效果

思想

/*
属性：
获取所有的li
获取放置评价信息的div
记录点击下标
记录点击状态 = false
评价内容：差，一般，好，很好，非常好
移入事件
if(是否点击过){
if(当前移入的下标 >= 点击下标){
for(let c = 0;c < 长度;c ++){
星星.style.background = 灰色
}
for(let i = 0;i <= 当前下标;i ++){
li.style.background = ‘金色’;
}
}
}else{
for(let c = 0;c < 长度;c ++){
星星.style.background = 灰色
}
for(let i = 0;i <= 当前下标;i ++){
li.style.background = ‘金色’;
}
}
点击事件
记录点击下标 = 当前点击的下标
记录点击状态 = true
放置评价信息的div.innerText = 评价内容[当前点击的下标]
*/

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五星好评</title>
    <style type="text/css">
        #ul1{
            width: 200px;
            height: 28px;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #ul1 li{
            width: 27px;
            height: 28px;
            float: left;
            background: url(img/star.gif) no-repeat 0 0;
            
        }
    </style>
</head>
<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="box"></div>
    <script src="js/index.js"></script>
</body>
</html>

js

/*
    属性：
    获取所有的li
    获取放置评价信息的div
    记录点击下标
    记录点击状态 = false
    评价内容：差，一般，好，很好，非常好
    移入事件
        if(是否点击过){
            if(当前移入的下标 >= 点击下标){
                for(let c = 0;c < 长度;c ++){
                    星星.style.background = 灰色
                }
                for(let i = 0;i <= 当前下标;i ++){
                    li.style.background = '金色';
                }
            }
        }else{
            for(let c = 0;c < 长度;c ++){
                星星.style.background = 灰色
            }
            for(let i = 0;i <= 当前下标;i ++){
                li.style.background = '金色';
            }
        }

    点击事件
        记录点击下标 = 当前点击的下标
        记录点击状态 = true
        放置评价信息的div.innerText = 评价内容[当前点击的下标]
*/
class Star{
    constructor(){
        // 属性：
        // 获取所有的li
        this.li = document.querySelectorAll('#ul1 li');
        // 获取放置评价信息的div
        this.div = $('#box');
        //获取ul
        // this.ul = $('#ul1');
        // 记录点击下标
        this.index = -1;
        // 记录点击状态 = false
        this.flag = false;
        // 评价内容：差，一般，好，很好，非常好
        this.arr = ['差','一般','好','很好','非常好'];
        //方法
        this.addEvent();
    }

    addEvent(){
        // 移入事件
        //遍历每一个星星
        for(let i = 0,len = this.li.length;i < len;i ++){
            this.li[i].onmouseenter = function(){
                if(this.flag){
                    if(i >= this.index){
                        for(let a = 0,len = this.li.length;a < len;a ++){
                            this.li[a].style.background = ' url(img/star.gif) no-repeat 0 0';
                        }
                        //滑入的星星之前的所有星星都变亮
                        for(let b = 0;b <= this.index; b ++){
                            this.li[b].style.background = ' url(img/star.gif) no-repeat 0 -29px';
                        }
                    }
                }else{//没有点击过，滑入那个星星，哪个星星之前的所有星星就都变亮，当再次滑入前面的星星的时候，后面所有的星星都变暗，所以，当每次滑入的时候就先让所有的星星都变暗，滑入哪个再让哪个之前的星星都变亮。
                    //所有星星都变暗
                    for(let c = 0,len = this.li.length;c < len;c ++){
                        this.li[c].style.background = ' url(img/star.gif) no-repeat 0 0';
                    }
                    //滑入的星星之前的所有星星都变亮
                    for(let j = 0;j <= i; j ++){
                        this.li[j].style.background = ' url(img/star.gif) no-repeat 0 -29px';
                    }
                }
            }.bind(this);

            // 点击事件
            this.li[i].onclick = function(){
            // 记录点击下标 = 当前点击的下标
                this.index = i;
            // 记录点击状态 = true
                this.flag = true;
            // 放置评价信息的div.innerText = 评价内容[当前点击的下标]
                this.div.innerText = this.arr[i];
            //点击的星星之前的都变亮
                for(let m = 0,len = this.li.length;m < len;m ++){
                    this.li[m].style.background = ' url(img/star.gif) no-repeat 0 0';
                }
                //滑入的星星之前的所有星星都变亮
                for(let m = 0;m <= i; m ++){
                    this.li[m].style.background = ' url(img/star.gif) no-repeat 0 -29px';
                }
            }.bind(this);
        }
    }
}

function $(selector){
    return document.querySelector(selector);
}

new Star();

效果

鼠标放上去的效果
在这里插入图片描述鼠标点击的效果
在这里插入图片描述

放大镜效果

思想

面向对象的思维分析
分析功能
移入事件，移入的时候，滑块显示，大图显示
移出事件，移出的时候，滑块消失，大图消失
移动事件，移动的时候，滑块跟随，滑块有边界，不能出来图片，且鼠标在滑块中间
放大镜的核心：求比例
鼠标在小图上移动多少，对应的右边的大图移动相应对的比例。
要注意：图片上面加了一层透明度为0的遮罩层，因为鼠标是在图片上移动，鼠标和图片之间还有一个滑块，所以要在图片上加一层透明度为0的遮罩层，让鼠标直接在遮罩层上移动。
/*
属性
1. 获取小图（坑)==> 遮罩
2. 获取滑块
3. 获取大图盒子
4. 获取大图
方法
事件
1. 移入
滑块显示
大图显示
2. 移出
滑块消失
大图消失
3. 移动
滑块跟随–鼠标在滑块中间–边界
//放大镜的核心：求比例
let p_x = 滑块当前的left / (图片的宽度 - 滑块的宽）
let p_y = 滑块当前的top / (图片的高度 - 滑块的高）
//设置大图的位置
大图.style.left = -p_x * (大图的宽度 - 大图所在盒子的宽) + ‘px’;
大图.style.top = -p_y * (大图的高度 - 大图所在盒子的高) + ‘px’;
*/

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
	</head>
	<body>
		<div id="div1">
			<div class="small_pic">
				<span class="mark"></span>   <!--遮罩层-->
				<span class="float_layer"></span>
				<img src="img/small.jpg" />
			</div>
			<div class="big_pic">
				<img src="img/big.jpg" />
			</div>
		</div>

		<script src="js/index.js"></script>
	</body>
</html>

js

/*
    属性
    1. 获取小图（坑)==> 遮罩
    2. 获取滑块
    3. 获取大图盒子
    4. 获取大图
    方法
    事件
        1. 移入
            滑块显示
            大图显示
        2. 移出
            滑块消失
            大图消失
        3. 移动
            滑块跟随--鼠标在滑块中间--边界

            //放大镜的核心：求比例
            let p_x = 滑块当前的left / (图片的宽度 - 滑块的宽）
            let p_y = 滑块当前的top / (图片的高度 - 滑块的高）

            //设置大图的位置
            大图.style.left = -p_x * (大图的宽度 - 大图所在盒子的宽) + 'px';
            大图.style.top = -p_y * (大图的高度 - 大图所在盒子的高) + 'px';
            
*/
class Glass{
    constructor(){
        // 1. 获取遮罩
        this.mark = $('.mark');
        // 2. 获取滑块
        this.float = $('.float_layer');
        // 3. 获取大图盒子
        this.big_pic = $('.big_pic');
        // 4. 获取大图
        this.big_img = $('.big_pic img');
        //添加事件
        this.addEvent();
    }
    addEvent(){
        // 1. 移入
        //     滑块显示
        //     大图显示
        this.mark.onmouseenter = function(){
            this.float.style.display = 'block';
            this.big_pic.style.display = 'block';
        }.bind(this);
        // 2. 移出
        //     滑块消失
        //     大图消失
        this.mark.onmouseleave = function(){
            this.float.style.display = 'none';
            this.big_pic.style.display = 'none';
        }.bind(this);
        // 3. 移动
        //     滑块跟随--鼠标在滑块中间--边界

        //     //放大镜的核心：求比例
        //     let p_x = 滑块当前的left / (图片的宽度 - 滑块的宽）
        //     let p_y = 滑块当前的top / (图片的高度 - 滑块的高）

        //     //设置大图的位置
        //     大图.style.left = -p_x * (大图的宽度 - 大图所在盒子的宽) + 'px';
        //     大图.style.top = -p_y * (大图的高度 - 大图所在盒子的高) + 'px';
        this.mark.onmousemove = function(evt){
            let e = evt || window.event;
            let left = e.offsetX - this.float.offsetWidth / 2;
            let top = e.offsetY - this.float.offsetHeight / 2;
            //边界
            if(left <= 0){
                left = 0;
            }else if(left >= this.mark.offsetWidth - this.float.offsetWidth){
                left = this.mark.offsetWidth - this.float.offsetWidth;
            }
            if(top <= 0){
                top = 0;
            }else if(top >= this.mark.offsetHeight - this.float.offsetHeight){
                top = this.mark.offsetHeight - this.float.offsetHeight;
            }
            this.float.style.left = left + 'px';
            this.float.style.top = top + 'px';


             //     let p_x = 滑块当前的left / (图片的宽度 - 滑块的宽）
        //     let p_y = 滑块当前的top / (图片的高度 - 滑块的高）
            let p_x = left / (this.mark.offsetWidth - this.float.offsetWidth);
            let p_y = top / (this.mark.offsetHeight - this.float.offsetHeight);

            //     //设置大图的位置
            //     大图.style.left = -p_x * (大图的宽度 - 大图所在盒子的宽) + 'px';
            //     大图.style.top = -p_y * (大图的高度 - 大图所在盒子的高) + 'px';
            this.big_img.style.left = -p_x * (this.big_img.offsetWidth - this.big_pic.offsetWidth) + 'px';
            this.big_img.style.top = -p_y * (this.big_img.offsetHeight - this.big_pic.offsetHeight) + 'px';
        }.bind(this);
    }
}

function $(selector){
    return document.querySelector(selector);
}
new Glass();

效果

在这里插入图片描述

瀑布流

固定列数瀑布流

思想

瀑布流的核心：找最小高度的列的位置
面向对象分析
1.求最小高度：求所有列当中最小高度列所在的下标值
固定列数，每一列为一个ul，把所有的ul放在数组中，先取出数组中第一个值（ul的高度）赋为最小值，遍历数组，拿这个最小的值与数组中后面的所有的值比较，比较出最小的，然后记录这个下标，并把这个下标返回去。
2.依次加载图片：遍历所有的图片，遍历出来是图片名，有一张图片就要有一个li标签，然后有一个img标签，然后再设置img的src属性为遍历出来的图片名。

HTML

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>瀑布</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			#box {
				margin: 0 auto;
				width: 700px;
			}
			ul {
				width: 200px;
				float: left;
				margin: 0 auto;
				margin-right: 10px;
			}
			img {
				width: 200px;
				padding-top: 10px;
			}
		</style>
		
	</head>

	<body>
		<!--<input type="button" name="btn" id="btn" value="加载图片" />-->
		<div id="box">
			<ul></ul>
			<ul></ul>
			<ul></ul>

		</div>
		<script src="index.js"></script>
	</body>

</html>

js

class WaterFall{
    constructor(){
        //获取所有的列
        this.ul = document.querySelectorAll('#box ul');
        //加载图片
        this.loadImg();
    }
    //求最小高度
    minHeight(){
        //设置第一个为最小高度
        let min_height = this.ul[0].offsetHeight;
        //记录下标
        let index = 0;
        //遍历所有的ul
        for(let i = 0,len = this.ul.length;i < len;i ++){
            if(min_height > this.ul[i].offsetHeight){
                min_height = this.ul[i].offsetHeight;
                index = i;
            }
        }
        return index;
    }
    //加载图片
    loadImg(){
        for(let i = 1;i < 57;i ++){
            //创建li
            let li = document.createElement('li');
            //创建img
            let img = document.createElement('img');
            //设置src
            img.src = `images/${i}.jpg`;
            //把图片放到li里
            li.appendChild(img);
            //把li放到ul里
            this.ul[this.minHeight()].appendChild(li);
        }
    }
}
new WaterFall();

//无限加载
//页面的实际高度 = 滚动条的高度 + 页面的可视区高度
//当 滚动条的高度 + 页面的可视区高度 >= 页面的实际高度的时候 再重新加载一遍所有的图片

//页面的可视区高度
//页面的可视区高度的声明必须写在滚动事件的外面，

window.onscroll = function(){
    let client_height = document.body.offsetHeight;
    //滚动条的高度
    let scroll_top = Math.ceil(document.documentElement.scrollTop || document.body.scrollTop);
    //页面的实际高度
    let scroll_height = document.body.scrollHeight;
    // let scroll_height = this.ul.offsetHeight;
    console.log(scroll_top + client_height,scroll_height);
    if(scroll_top + client_height >= scroll_height * 0.8){
        new WaterFall();
    }
}

效果

在这里插入图片描述

自适应瀑布流

思想

/*
属性
方法
1. 获取大盒子
2. 获取所有子节点
3. 计算大盒子的宽
4. 计算一个子节点的宽
5. 计算列数
6. 计算列之间的间隙
7. 初始化第一行中每一列的坐标值。
1. 数组放置每一个子节点的坐标
2. 对象 {left:xxx,top:xxx}
8. 对号入座（将每一个子节点放到指定的位置）
核心：求最小高度的下标
*/

HTML

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>自适应瀑布流</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			html {
				height: 100%;
			}
			body {
				height: 100%;
			}
			img {
				border: 0;
			}
			div.wrap {
				width: 100%;
				margin: 0 auto;
				overflow: hidden;
				position: relative;
				background: #DDD;
			}
			div.wrap div {
				width: 200px;
				padding: 4px;
				border: 1px solid #000;
				float: left;
				position: absolute;
			}
			div.wrap div h3 {
				line-height: 35px;
			}
			div.wrap div img {
				width: 200px;
			}
		</style>
		<script src="js/index.js"></script>
	</head>

	<body>
		<div class="wrap" id="wrap">
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/1.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/2.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/3.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/4.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/5.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/6.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/7.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/8.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/9.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/10.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/11.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/12.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/13.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/14.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/15.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/16.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/17.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/18.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/19.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/20.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/21.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/22.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/23.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/24.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/25.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/26.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/27.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/28.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/29.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/30.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/31.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/32.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/33.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/34.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/35.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/36.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/37.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/38.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/39.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/40.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/41.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/42.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/43.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/44.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/45.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/46.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/47.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/48.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/49.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/50.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/51.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/52.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/53.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/54.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/55.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/56.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/57.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="waterfall/58.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
		</div>
	</body>

</html>

js

/*
    属性

    方法
    1. 获取大盒子
    2. 获取所有子节点
    3. 计算大盒子的宽
    4. 计算一个子节点的宽
    5. 计算列数
    6. 计算列之间的间隙
    7. 初始化第一行中每一列的坐标值。
        1. 数组放置每一个子节点的坐标
        2. 对象 {left:xxx,top:xxx}
    8. 对号入座（将每一个子节点放到指定的位置）


    核心：求最小高度的下标

*/
class WaterFull{
    constructor(){
        this.init();
    }
    init(){
        // 1. 获取大盒子
        this.big_box = document.querySelector('#wrap');
        // 2. 获取所有子节点
        this.childs = this.big_box.children;
        // 3. 计算大盒子的宽
        this.big_box_width = this.big_box.offsetWidth;
        // 4. 计算一个子节点的宽
        this.childs_width = this.childs[0].offsetWidth;
        // 5. 计算列数
        this.colum = parseInt(this.big_box_width / this.childs_width);
        // 6. 计算列之间的间隙
        // this.map = parseInt((this.big_box_width - this.childs_width * colum) / (this.colum + 1));
        this.map = parseInt((this.big_box_width % this.childs_width) / (this.colum + 1));
        // 7. 初始化第一行中每一列的坐标值。
        //     1. 数组放置每一个子节点的坐标
        //     2. 对象 {left:xxx,top:xxx}
        //要声明在for循环外面
        this.arr = [];
        for(let i = 0;i < this.colum;i ++){
            //把left和top存放在对象中
            let obj = {
                left : this.childs_width * i + this.map * (i + 1),
                top : 10
            }
            this.arr.push(obj);
            // console.log(this.arr);
        }
        // 8. 对号入座（将每一个子节点放到指定的位置）
        for(let i = 0,len = this.childs.length;i < len;i ++){
            //调用函数获取最小高度的列
            let index = this.minHeight();
            //确定图片的left值 为 数组中存放的最小高度的列的left值
            // this.childs[i].style.left = this.arr[index].left + 'px';
            // 确定图片的top值 为 数组中存放的最小高度的列的top值
            // this.childs[i].style.top = this.arr[index].top + 'px';

            //运动框架
            sport(this.childs[i],{left : this.arr[index].left,top : this.arr[index].top});
            sport(this.childs[i],{left : this.arr[index].left,top : this.arr[index].top});

            //上面的图片放在了数组中最小高度列的位置，修改这个位置的top值，修改为原来的值加上放上去的图片的高度，再加上一个间隙的值。
            this.arr[index].top += this.childs[i].offsetHeight + 10 ;
            //由于所有的图片都使用了定位，脱离的文档流，所以大盒子没有高度
            this.big_box.style.height = this.arr[index].top + 'px';
        }
    }
    
    minHeight(){
        let min_height = this.arr[0].top;
        let index = 0;
        // for(let i = 0;i < this.arr.length;i ++){
        //     if(min_height > this.childs[i].offsetHeight){
        //         min_height = this.childs[i].offsetHeight;
        //         index = i;
        //     }
        // }
        //有几列，数组中就存放几个值，数组中的值通过上面的（8.对号入座）操作来不断修改，然后不断判断哪一个为最小高度
        this.arr.forEach(function(value,i){
            if(min_height > value.top){
                min_height = value.top;
                index = i;
            }
        })
        return index;
    }
}
//在页面加载完成之后再执行（由于script标签在body的最上面引入）
window.onload = function(){
    new WaterFull();
}
//onresize  窗口宽度自适应  
//浏览器窗口宽度发生变化时，触发事件
window.onresize = function(){
    new WaterFull();
}

//获取非行内样式
function getStyle(obj,attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
//运动框架
function sport(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(() => {
        let flag = true;
        for(let attr in json){
            let cur = attr === 'opacity' ? parseInt(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr));
            let speed = (json[attr] - cur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(json[attr] !== cur){
                flag = false;
            }
            if(attr === 'opacity'){
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = 'alpha(opacity = ' + (cur + speed) + ')';
            }else{
                obj.style[attr] = cur + speed + 'px';
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn instanceof Function){
                fn();
            }
        }
    },30)
}

效果

瀑布流的列数随着屏幕的宽度的变化而变化
在这里插入图片描述
在这里插入图片描述

易de
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts入门（通过axios请求数据）
qq_45021462的博客
11-22 6186
echarts入门（axios请求数据） 1. npm 安装 ECharts npm install echarts --save 2. 下面的是基本结构，里面的数据是静态的（写死的，不是通过接口请求到的） <template> <div> <div id="echart" style="width : 80%;height : 300px"></div> </div> </template&gt
分享996个实用的JavaScript特效你要的全在这里
猎人村庄的博客
05-29 4594
链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效，总有一款适合你，小弟在某付费网站上收集的，虽然不是我的原创但是小弟这996个Js也是花了很多时日！下面是JS的名字，我放了一些图片，所有图片全都放进去是不行的996个图太多，大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围.
Unity3D插件大全
学无止境的专栏
07-31 6083
【转】http://www.cnblogs.com/dingxiaowei/articles/3113974.html 200个插件免费分享约5G。 【清单如下】 2D_Toolkit_1.51动画开发插件包 FingerGestures触摸插件 ORK_Okashi_RPG_Kit Unity3D的角色扮演游戏开发工具包 uScript视觉脚本工具Unit
Unity 3D插件大全
痞子龙3D编程
10-13 4460
200个插件免费分享约5G。 【清单如下】 2D_Toolkit_1.51动画开发插件包 FingerGestures触摸插件 ORK_Okashi_RPG_Kit Unity3D的角色扮演游戏开发工具包 uScript视觉脚本工具UnityEasyMotion2D脚本插件 Playmaker_1.21可视化编程插件 RageSpline EZ GUI 2 GlyphDesign
vue.js组件vue-waterfall-easy实现瀑布流效果
12-12
在 Vue.js 中实现瀑布流效果，通常需要处理元素的排列和动态加载问题。Vue-waterfall-easy 提供了一种简洁的方式，允许开发者轻松地将瀑布流集成到他们的应用中。在介绍如何使用这个组件之前，我们先了解一下瀑布流...
WxMasonry-微信小程序实现瀑布流布局
03-29
在微信小程序的循环列表中，如何实现图片的等比例缩放，这件事上我有尝试，但是效果不佳，欢迎交流解决方案！！ 实现方式 虽然实现方式很简单，但是我起初没有想到，也是绕了很远的路才想到。当你看到下面的解决方案...
MagicZoom-js放大镜插件.zip
07-11
**MagicZoom-js放大镜插件** 是一款专为电商网站设计的JavaScript库，它提供了商品详细页面中的图片局部放大功能，让顾客可以更清晰地查看商品细节，从而提高购物体验。这款插件不仅实现了鼠标悬停时的放大效果，还...
waterfall-jQuery实现的瀑布流效果.zip
07-04
waterfall-jQuery实现的瀑布流效果，当前流行的一种布局风格，向下滚动即时加载内容,下拉滚动条或鼠标滚轮滚动到页面底部时， 动态即时加载新内容。主要是当滚动到居底部以上100像素时，就开始加载新内容了。
微信小程序-瀑布流布局.zip
04-20
这通常需要在JavaScript（在微信小程序中是JS）中实现。可以通过监听`onScroll`事件获取滚动位置，然后计算当前可视区域的最后一个元素的位置，以此为基准布局新的元素。 5. **数据绑定与渲染**：在微信小程序中，...
Vue使用elementUI实现一个后台管理
qq_45021462的博客
11-15 4211
Vue使用elementUI实现一个后台管理功能效果功能分析1.安装2.main.vue3.App.vue4.views(1) Home.vue 功能效果 初始界面 添加商品分类 修改分类 删除分类 功能分析 1.安装 （1）首先创建一个vue项目，创建过程我之前的博客有写过。该后台是基于element UI组件库。 （2）安装element ui npm -i element-ui -S （3）全局引入，参考element-UI官网 引入下面的代码到mian.js import Ele
axios拦截器
qq_45021462的博客
12-09 2582
请求拦截 interceptors 拦截器 this.$axios.interceptors.request.use(config=>{ // 发生请求前的处理 return config },err=>{ // 请求错误处理 return Promise.reject(err); }) //或者用axios实例创建拦截器 let instance = this.$axios.create(); instance.interceptors.r.
Vue实现用户登录导航守卫
qq_45021462的博客
11-30 2282
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下： 1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码 2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token 3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面 4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面 5、每次调后端接口，都要在请求头中加token 6、后端判断请求头中有无token，
v-on指令详解
qq_45021462的博客
11-04 1755
获取点击事件元素本身 < button type=“button” @click=“click1($event)”>按钮< /button> methods : { click1() { …} } console.log(e);//返回一个鼠标事件对象MouseEvent。 console.log(e.target);//通过对象的target来获取触发事件的对象。 console.log(e.clientX);//通过对象的target来获取鼠标的相对坐标值X。 &l.
编程式导航传参
qq_45021462的博客
11-28 1232
如果路由跳转使用path，必须使用query方式传参，如果使用name跳转，query和params都可以传参，建议使用query方式传参，query方式传参，参数在地址栏，当刷新页面后，参数还可以通过地址栏获取。 path跳转，query传参 this.$router.push({ path : '/main', query : { userName : this.ruleForm.name } }) 跳转到的页面： {{this.$route.que
个人简历
qq_45021462的博客
07-28 1017
个人简历 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简历</title> </head> <body> <table bord
JS面试题之数组去重
qq_45021462的博客
11-01 981
1.如果数组的第i项，第一次出现的位置不是在下标i，那么这个元素就是重复出现了，是下标i，说明是第一次出现，则放入新数组。 <script> function arrNoRepeat1(arr){ let new_arr = []; for(let i = 0,len = arr.length;i < len;i ++){ //如果数组的第i项，第一次出现的位置不是在下标i，那么这个元素就是重复
react组件化实现简易留言板
qq_45021462的博客
11-23 838
react组件化实现简易留言板效果1.input组件2.button组件3.list组件4.App.jsx5.index.js 效果 可以拆分为三个组件，input组件，button组件，list组件 1.input组件 input组件实现昵称的输入框和留言内容的输入框，通过判断父组件上是否传了row属性来判断是展示位单行输入框还是文本域输入框。 这两种输入框上面都有一个OnInput事件，用来获取当前输入框的值。 import React,{Fragment} from 'react' export
2020-09-15---js实现购物车&轮播图
qq_45021462的博客
09-16 694
购物车&轮播图购物车思想轮播图 购物车 思想 /* 一、 查看购物车-- 点击事件–跳转页面 二、购买 ==== 点击事件 1. 获取购物车页面所需要的商品信息（id/name/price/num) let good_id = …; let good_name = ‘…’ 2. localStorage = ‘key’ ‘value’ ‘key’ ‘product_’ + 商品id ‘value’ ‘{“id” : 1,“name” : “水杯”,“price” : 29,“num” :
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值