简单的瀑布流效果的实现—纯CSS和原生JS两种方式

最新推荐文章于 2024-08-13 10:02:39 发布

wxd_97

最新推荐文章于 2024-08-13 10:02:39 发布

阅读量392

点赞数 2

文章标签： css javascript html

本文链接：https://blog.csdn.net/wxd_97/article/details/104772337

版权

纯CSS实现瀑布流

纯css实现瀑布流是利用多列实现，缺点是没有行为控制，只能多次添加图片并且不能实现选择性的查找位置插入图片。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>picture</title>
	<style type="text/css">
		body{background: #352323 url(../img/a.png);}
		.wrap{width: 95%;margin: 0 auto;column-count: 5;column-gap: 0;}
		.wrap figure{border: solid 2px pink;margin: 0 5px 5px;padding: 5px;break-inside: avoid;}
		.wrap figure img{width: 100%;}
		.wrap figure figcaption{color: burlywood;font-weight: 900;text-align: center;line-height: 40px;}
	</style>
</head>
<body>
<section class="wrap">
/*此处只用两个图片示例，如果要生成瀑布流效果需要多张图片才能看出*/
	<figure>
		<img src="../img/1.jpg" alt="">
		<figcaption>当红女星男性陷入整容旋涡</figcaption>
	</figure>
	<figure>
		<img src="../img/2.jpg" alt="">
		<figcaption>当红女星男性陷入整容旋涡</figcaption>
	</figure>
</section>
</body>
</html>

原生JS实现瀑布流

原生JS实现瀑布流实现了自适应，实现每行的图片张数的不同，并且可以自行添加图片，都是从页面上获取宽高的。

//思路：
// 瀑布流效果
	// 1.第一行浮动（通过css实现）
	// 2.如何区分第一行和后面的行
		// 2.1先找到第一行最矮的
		// 2.2后面的行的所有内容全部定位
		// 2.3left设置最矮的元素的索引*任意一个元素的宽度
		// 2.4top设置成上一行最矮的元素的高度
		// 2.5修改最矮的那个元素，加上刚刚放置元素的高度
	// 重置执行2.1向后的步骤
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{margin: 0 auto;position: relative;}
        .box{float: left;padding: 4px;}
        .imgbox{border: solid 1px black;padding: 4px;border-radius: 4px;}
        .imgbox img{width: 200px;display: block;}
    </style>
    <script>
        onload = function(){
            var wf = new WaterF();
            wf.init();
        }
    	//想要改变窗口时实时刷新，可以写上下边的代码↓↓↓↓
        // onresize = function(){
        //     var wf = new WaterF();
        //     wf.init();
        // }
        class WaterF{
            constructor(){
                this.clientW = document.documentElement.clientWidth;
                this.abox = document.querySelectorAll(".box");
                this.cont = document.querySelector(".cont");
            }
            init(){
                // 根据屏幕的宽度 / 任意一个结构的宽度，得到一行最大能放几个
                this.maxNum = parseInt(this.clientW / this.abox[0].offsetWidth);
                // 根据一行能放置的个数 * 任意一张图片的宽度，得到了大框的真正的宽
                this.cont.style.width = this.maxNum * this.abox[0].offsetWidth + "px";

                // 完善布局之后，开始区分第一行和后面的行
                this.firstLine();
                this.otherLine();
            }
            firstLine(){
                // 第一行，获取所有元素的高度放在一个数组中，准备获取最小值
                this.heightArr = [];
                for(var i=0;i<this.maxNum;i++){
                    this.heightArr.push(this.abox[i].offsetHeight);
                }
            }
            otherLine(){
                // 需要拿到后面行的所有元素
                for(var i=this.maxNum;i<this.abox.length;i++){
                    // 在拿到后面行的元素的时候，获取第一个行的最小值和最小值所在的索引
                    // var min = Math.min(...this.heightArr);
                    var min = getMin(this.heightArr);
                    var minIndex = this.heightArr.indexOf(min);
                    // 设置定位
                    this.abox[i].style.position = "absolute";
                    // 根据最小值设置top
                    this.abox[i].style.top = min + "px";
                    // 根据最小值的索引设置left
                    this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
                    // 修改最小值为，原来的数据+当前新放置元素的高度
                    this.heightArr[minIndex] = this.heightArr[minIndex] + this.abox[i].offsetHeight;

                    // 剩下的交给循环
                }
            }
        }

        function getMin(arr){
            var myarr = [];
            for(var j=0;j<arr.length;j++){
                myarr.push(arr[j]);
            }
            return myarr.sort((a,b)=>a-b)[0];
        }
    </script>
</head>
<body>
    <div class="cont">
        //此处只用两个图片示例，用户可自行添加图片
        <div class="box">
            <div class="imgbox">
                <img src="../img/WaterF2.jpg" alt="">
            </div>
        </div>
		<div class="box">
            <div class="imgbox">
                <img src="../img/WaterF2.jpg" alt="">
            </div>
         </div>
    </div>
</body>
</html>