瀑布流效果

最新推荐文章于 2023-05-29 23:38:41 发布

this_is_Azou

最新推荐文章于 2023-05-29 23:38:41 发布

阅读量167

点赞数

分类专栏： css 文章标签： html css3

本文链接：https://blog.csdn.net/this_is_Azou/article/details/110894457

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

瀑布流效果

1.使用js方法

Masonry.js
Isotope.js

原理：通过js来计算一共有多少个方格，在计算每一个方格的宽度和高度，匹配容器的宽度可以放置多少行；全部方格的position都设置为absolute，逐一计算top和left进行定位，因此当浏览器容器变动的时候，所有元素进行动态重新计算和排列；

2.使用css两个属性：column-count,column-gap

http://picsum.photos/360/460?random=1

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="day_10.css">
</head>
<body>
<div class="masonry">
    <div class="item"><img src="http://picsum.photos/360/460? random=1" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460? random=2" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=3" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=4" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=5" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=6" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=7" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=8" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=9" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=10" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=11" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=12" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=13" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=14" alt=""></div>
    <div class="item"><img src="http://picsum.photos/360/460?random=15" alt=""></div>
</div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
body{
    margin:4px;
    font-family: "Microsoft JhengHei UI Light";
}
.masonry{
    column-count:4;
    column-gap:0;
}
.item{
    padding:2px;
    position:relative;
    counter-increment:item-counter;
}
.item img{
    /*设置图片按照item容器的大小方法缩小*/
    display:block;
    width:100%;
    height:auto;
}
.item::after{
    content:counter(item-counter);
    position:absolute;
    display:block;
    top:2px;
    left:2px;
    width: 24px;
    height: 24px;
    text-align:center;
    line-height: 24px;
    background-color: #efeeee;
    color:#9370db;
}

column-count，column-gap

column-count：定义元素被划分的列数，默认值为auto；也可直接设置数值；
column-gap：指定列之间的距离

counter-increment

属性代表递增计数器的值

none：表示没有计数器递增
id number：id定义将增加计数的选择器，id，class; number定义增量，可为正数，0，负数
inherbit：继承父类

counter-reset

counter-reset属性创建或重置一个或多个计数器。其默认值为none（不能对选择器的计数器进行重置）；其属性值有 none ，id number ，inherit三个属性值。
id number：id 定义将重置计数的选择器、id 或 class。number 。可以设置选择器出现个数number 可以是正数、零或者负数。
inherit：继承父类的属性值。

效果

瀑布流效果

缺点

是由上至下，由左至右的排列；

3.使用flex-box

*{
    margin: 0;
    padding: 0;
}
body{
    margin:4px;
    font-family: "Microsoft JhengHei UI Light";
}
.masonry{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    height: 1000px;

}

.item{
    position:relative;
    width: 25%;
    padding:2px;
    box-sizing:border-box;
    counter-increment:item-counter;
}
.item img{
    display: block;
    width: 100%;
    height:auto;
}
.item::after{
    content:counter(item-counter);
    position:absolute;
    display:block;
    top:2px;
    left:2px;
    width: 24px;
    height: 24px;
    text-align:center;
    line-height: 24px;
    background-color: #efeeee;
    color:#9370db;
}
.item:nth-child(4n+1){
    order:1;
}
.item:nth-child(4n+2){
    order:2;
}
.item:nth-child(4n+3){
    order:3;
}
.item:nth-child(4n){
    order:4;
}

效果
在这里插入图片描述

this_is_Azou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
瀑布流效果

瀑布流效果1.使用js方法Masonry.jsIsotope.js原理：通过js来计算一共有多少个方格，在计算每一个方格的宽度和高度，匹配容器的宽度可以放置多少行；全部方格的position都设置为absolute，逐一计算top和left进行定位，因此当浏览器容器变动的时候，所有元素进行动态重新计算和排列；2.使用css两个属性：column-count,column-gaphttp://picsum.photos/360/460?random=1HTML<!DOCTYPE html
复制链接

扫一扫