[移动端] 小案例---flex 不等高-瀑布流

最新推荐文章于 2024-04-01 16:08:52 发布
最新推荐文章于 2024-04-01 16:08:52 发布
阅读量1.1k 收藏 5
点赞数 2
分类专栏： # 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/119729041
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/flexble.js"></script>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/02.css">
    <title>Document</title>
</head>
<body>
    <header>
        <span class="iconfont icon-xiangzuo"> </span>
        <span>打底裤</span>
        <span class="iconfont icon-fangdajing"></span>
    </header>
    <nav>
        <span>推荐</span>
        <span>最新</span>
        <span>销量</span>
    </nav>
    <section>
        <div>
            <img src="img/1.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/2.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/3.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/4.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/5.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/6.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/7.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/8.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/7.jpg" alt="">
            <p>往后余生</p>
        </div>
        <div>
            <img src="img/8.jpg" alt="">
            <p>往后余生</p>
        </div>
    </section>
    <footer>
        <span class="iconfont icon-xiangzuo"> </span>
        <span>尾部</span>
        <span class="iconfont icon-fangdajing"></span>
    </footer>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
img{
    vertical-align: middle;
}
a{
    text-decoration: none;
}
input{
    outline: none;
    border: none;
}
html,body{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
}

/* 头部 */
header{
    background-color: #ffffff;
    /* height: 0.84rem; */
    line-height: 0.84rem;
    font-size: 0.4rem;
    display: flex;
    justify-content: space-between;
    color: #999999;
    /* 固定定位不占空间 */
    position: fixed;
    top: 0;
    width: 100%;
}
header>span:not(:nth-child(2)){
    padding: 0 0.3rem;
}
header>span:nth-child(2){
    font-size: 0.3rem;
    color: #666;
}

/* 导航 */
nav{
    /* height: 0.84rem; */
    color: #333333;
    background-color: #ffffff;
    font-size: 0.25rem;
    line-height: 0.84rem;
    display: flex;
    justify-content: space-around;
    padding-top: 0.9rem;
}
nav span:hover{
    color: #ff2220;
}

/* 主体 */
section{
    /* 整个窗口的高 */
    flex: 1;
    background-color: #f5f5f5;
    /* 多列显示 */
    columns: 2;
    /* overflow: auto; */
    padding-bottom: 0.9rem;
}
section>div{
    border: 1px solid #000;
    padding:0.2rem;
    margin-bottom: 0.2rem;
    /* 不折列 */
    break-inside: avoid;
}
section>div>img{
    width: 100%;
}
footer{
    background-color: #ffffff;
    height: 0.84rem;
    line-height: 0.84rem;
    font-size: 0.4rem;
    display: flex;
    justify-content: space-between;
    color: #999999;
    position: fixed;
    width: 100%;
    bottom: 0;
}

在这里插入图片描述

533_
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 瀑布流（元素垂直不规则）
Tianxuyanglin的博客
09-17 566
今天在检查项目的商品列表时，发现用flex弹性布局的垂直列表并不是我想要的效果。商品列表被flex弹性布局影响导致高度异常。在网上查资料时发现flex弹性布局并不能做到垂直不规则的排列
3种方式实现瀑布流布局小结
12-13
前言 今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。 一、JS 实现瀑布流 思路分析 瀑布流布局的特点是等宽不等高。 为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。 父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。 代码实现 <!DOCTYPE html> <html> <head> <style> .box {
高度不同的流体瀑布css实现方法
最新发布
长缨缚苍龙
04-01 523
break-inside 属性规定在指定元素内部是否应发生分页（page-break）、分列（column-break）或分区（region-break）。总结：用到的css 属性有 columns:2,(2:两列分布)break-inside:avoid;(avoid:避免在元素内出现页、列、区域中断。通过使用 break-inside，您可以告知浏览器在图像、代码片段、表格以及列表内部避免中断。break-inside 属性扩展了 CSS2 的 page-break-inside 属性。
flex-messaging-4.7.3最新版本的jar
06-02
flex-messaging-4.7.3最新版本的jar
详解微信小程序之scroll-view的flex布局问题
10-17
主要介绍了详解微信小程序之scroll-view的flex布局问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解纯css实现瀑布流（multi-column多列及flex布局）
09-22
主要介绍了详解纯css实现瀑布流（multi-column多列及flex布局）的相关资料，用multi-column多列布局及flex布局实现瀑布流，感兴趣的小伙伴们可以参考一下
用 flex 和 瀑布流 解决高度不同的元素浮动导致页面混乱问题
haogemr的博客
06-16 3877
当元素的高度各不相同时并且设置了浮动，页面展示如下： flex布局瀑布流布局瀑布流动态加载图片 flex布局 红框所画图片在第一行放不下，属于第二行的元素，但是由于浮动的特性，导致它出现在了这个位置，如果想让它另起一行顶头展示，可以使用flex布局，在父级元素上设置： display: flex; flex-wrap: wrap; 子元素的浮动删除不删除都行，因为父级设置flex，子元素浮动自动失效，效果展示如下： 瀑布流布局 瀑布流展示参考博客： javascript实现瀑布流动态加载图片原理 通
flex瀑布流（响应式配置）
Sqddian的博客
02-21 1770
flex布局 瀑布流 响应式
flex 布局瀑布流
weixin_44286765的博客
04-25 940
Document
瀑布流布局原理及详解
dhp1994的博客
10-29 1151
主要使用了 column-count 和 column-gap 属性，column-count 属性用来设置列数，column-gap 属性用来设置列于列之间的间距。第一种方式实现的是列数固定的布局，所以当列数可以任意指定时，上述方法就不再适用了，动态列数的 DOM 结构和样式和第一种方式是一样的，只有 js 代码略有不同。将大容器（父元素）的 display 设置为 flex，然后使用 flex-flow 属性，设置为：flex-flow: column wrap。页面的 DOM 元素。
瀑布流布局Flex
偏执
08-03 821
但其它属性可以是一样。同样的，响应式设置，使用Flexbox实现响应式布局比多列布局要来得容易，他天生就具备这方面的能力，只不过我们这里需要对容器的高度做相关的处理。Flexbox布局到今天已经是使用非常广泛的，也算是很成熟的一个特性。而且当我们的项目列表是动态生成，而且内容不好控制之时，这就更蛋疼了。可以设置成任何高度值（采用任何的单位），但不能不显式的设置，如果没有显式的设置，容器就无法包裹住项目列表。这里关键是容器的高度，示例中显式的设置了。方法来控制每个列的宽度，如果你希望是三列，那么可以设置。
mybatis-flex-1.6.2.zip
09-01
mybatis-flex-1.6.2.zip源码： 更轻量 MyBatis-Flex 除了 MyBatis 本身，再无任何第三方依赖，因此会带来更高的自主性、把控性和稳定性。在任何一个系统中，依赖越多，稳定性越差。 更灵活 MyBatis-Flex 提供了非常灵活的 QueryWrapper，支持关联查询、多表查询、多主键、逻辑删除、乐观锁更新、数据填充、数据脱敏等等。 更高的性能 MyBatis-Flex 通过独特的架构，没有任何 MyBatis 拦截器、在 SQL 执行的过程中，没有任何的 SQL Parse，因此会带来指数级的性能增长。
微信小程序-FlexLayout布局.zip
04-13
微信小程序-fans-server的TCP,IP长连接.zip
flex实现瀑布流
热门推荐
small_shadow的博客
11-23 1万+
利用flex等分和弹性的特点，可以很轻松实现瀑布流布局，但是适用范围不广，比较适合数据量较少或者静态页面，因为这种写法从后端拿数据过来后得动态生成列数，可以实现，但是略微麻烦，这里不做解释。 最后效果 sass代码 .waterfall_box display: flex flex-wrap: wrap .box_column display: flex flex-direction: column div m
FlexboxLayout——实现灵活多变的瀑布流
apple_4872330的专栏
04-25 700
之前看到一个很炫酷的布局：FlexboxLayout，可以很方便地实现瀑布流的效果。今天正好用到项目中，对FlexboxLayout进行一个简单的学习。 一、效果图 先来看一波效果图。 很熟悉，对不对？就是简书的定制热门页面。通过今天的学习，利用FlexboxLayout+RecyclerView就可以实现。 下面是自己实现的效果图： 像上述的应用场景，会经常在一些APP中看到。那么就学起来吧，看看是怎么实现的。 二、FlexboxLayout简介 ...
css3对文字标签不同宽，不同高使用瀑布流对齐显示
qq_34720531的博客
09-04 917
【代码】css3对文字标签不同宽，不同高使用瀑布流对齐显示。
瀑布流布局的实现
weixin_42274805的博客
09-18 809
瀑布流布局视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部​​ 瀑布流的实现方法决定了它的元素排序，具体请看我这篇推文。
瀑布流布局（CSS flex实现）
一起学习一起进步~
10-09 1152
【代码】瀑布流布局（CSS flex实现）
align-items flex-direction flex-wrap flex-flow
06-11
这四个属性都是用于控制flex布局的。 - align-items用于设置flex容器内的所有项目在交叉轴上的对齐方式。 - flex-direction用于设置主轴的方向。 - flex-wrap用于设置是否换行。 - flex-flow是flex-direction和flex-wrap两个属性的缩写。 希望我的回答可以帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值