精华内容
下载资源
问答
  • <view class="container"> <view class="list"> ...view class="list-item" v-for="item in imageArr">...image class="item-img" :src="item.image" mode="widthFix" @tap="previewImage(item.image)"&...
    HTML
    <view class="container">
    
    <view class="list">
    
    <view class="list-item" v-for="item in imageArr">
    
    <image class="item-img" :src="item.image" mode="widthFix" @tap="previewImage(item.image)"></image>
    
    </view>
    
    </view>
    
    </view>

    CSS:

    .container {
    
    overflow-y: scroll;
    
    }
    
    .list {
    
    padding-top: 4rpx;
    
    column-count: 2;
    
    column-gap: 18rpx;
    
    margin-left: 40rpx;
    
    margin-right: 40rpx;
    
    .list-item {
    
    width: 326rpx;
    
    background: white;
    
    border-radius: 14rpx;
    
    .item-img {
    
    width: 100%;
    
    border-radius: 14rpx;
    
    }
    
    }
    
    }

    展开全文
  • css3-多瀑布流

    2021-03-19 17:54:35
    css3-多瀑布流) 多布局类似报纸或杂志中的排版方式,主要用以控制大篇幅文本。 多属性 ​ 1、column-count(最大数) 属性规定元素应该被分隔的数 适用于:除table外的非替换块级元素, table cells, ...

    css3-多列(瀑布流)

    多列布局类似报纸或杂志中的排版方式,主要用以控制大篇幅文本。
    

    多列属性

    ​ 1、column-count(最大列数)

    属性规定元素应该被分隔的列数
    适用于:除table外的非替换块级元素, table cells, inline-block元素
    

    ​ 2、column-gap

    属性规定列之间的间隔大小
    

    ​ 3、column-rule

    设置或检索对象的列与列之间的边框。复合属性。
    column-rule-color规定列之间规则的颜色。
    column-rule-style规定列之间规则的样式。
    column-rule-width规定列之间规则的宽度。
    

    ​ 4、column-fill

    设置或检索对象所有列的高度是否统一
    auto:列高度自适应内容
    balance:所有列的高度以其中最高的一列统一
    

    ​ 5、column-span

    设置或检索对象元素是否横跨所有列。
    none:不跨列
    all:横跨所有列
    

    ​ 6、column-width

    设置或检索对象每列的宽度(最小宽)
    

    ​ 7、columns

    设置或检索对象的列数和每列的宽度。复合属性
    <' column-width '> || <' column-count '>
    

    注:Internet Explorer 10 和 Opera 支持多列属性。
    Firefox 需要前缀 -moz-。
    Chrome 和 Safari 需要前缀 -webkit-。

    多列案例(瀑布流)
    在这里插入图片描述

    展开全文
  • css3——多布局、瀑布流

    千次阅读 2019-02-19 20:43:48
    colum-count:属性设置的具体个数 colum-width:属性控制的宽度 column-gap:两列之间的间距 column-rule:规定之间的分割线的宽度、样式和颜色 column-span:规定元素应横跨多少(1:不跨(默认);all...

    多列布局

    • colum-count:属性设置列的具体个数
    • colum-width:属性控制列的宽度
    • column-gap:两列之间的列间距
    • column-rule:规定列之间的分割线的宽度、样式和颜色
    • column-span:规定元素应横跨多少列(1:不跨列(默认);all:跨所有列)

    实例:

    <style>
            div {
                width: 100%;
                padding: 20px;
                box-sizing: border-box;
                /*设置列数*/
                column-count: 3;
                /*添加列间隙样式,与 border 类似*/
                column-rule: 2px dotted #f98769;
                /*设置列间隙*/
                column-gap: 50px;
                /*设置列宽
                原则:取大优先
                1.如果人为设置宽度大,则取更大的值,但是会填充整个屏幕,意味最终的宽度可能大于设置的宽度
                2.如果人为设置的宽度更小,则使用默认计算的宽度*/
                column-width: 100px;
            }
    
            div > h3 {
                text-align: center;
                /*设置跨列显示*/
                column-span: all;
            }
    </style>
    
    <div>
        <h3>文章</h3>
        <p>
            地坛离我家很近。或者说我家离地坛很近。总之,只好认为这是缘分。地坛在我出生前四百多年就座落在那儿了,而自从我的祖母年轻时带着我父亲来到北京,就一直住在离它不远的地方——五十多年间搬过几次家,可搬来搬去总是在它周围,而且是越搬离它越近了。我常觉得这中间有着宿命的味道:仿佛这古园就是为了等我,而历尽沧桑在那儿等待了四百多年。</p>
        <p>
            它等待我出生,然后又等待我活到最狂妄的年龄上忽地残废了双腿。四百多年里,它一面剥蚀了古殿檐头浮夸的琉璃,淡褪了门壁上炫耀的朱红,坍圮了一段段高墙又散落了玉砌雕栏,祭坛四周的老柏树愈见苍幽,到处的野草荒藤也都茂盛得自在坦荡。</p>
        <p>
            这时候想必我是该来了。十五年前的一个下午,我摇着轮椅进入园中,它为一个失魂落魄的人把一切都准备好了。那时,太阳循着亘古不变的路途正越来越大,也越红。在满园弥漫的沉静光芒中,一个人更容易看到时间,并看见自己的身影。</p>
        <p>
            “园墙在金晃晃的空气中斜切下—溜荫凉,我把轮椅开进去,把椅背放倒,坐着或是躺着,看书或者想事,撅一杈树枝左右拍打,驱赶那些和我一样不明白为什么要来这世上的小昆虫。”“蜂儿如一朵小雾稳稳地停在半空;蚂蚁摇头晃脑捋着触须,猛然间想透了什么,转身疾行而去;瓢虫爬得不耐烦了,累了祈祷一回便支开翅膀,忽悠一下升空了;树干上留着一只蝉蜕,寂寞如一间空屋;露水在草叶上滚动,聚集,压弯了草叶轰然坠地摔开万道金光。”</p>
    </div>
    

    在这里插入图片描述

    瀑布流

    /* 父元素 */
    column-count: 2;
    column-gap: 10px;
    /* 子元素 */
    break-inside: avoid;
    

    实例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0;
            }
            .waterfall-container {
                /*分几列*/
                column-count: 2;
                width: 100%;
                /* 列间距 */
                column-gap: 10px;
            }
            .waterfall-item {
                break-inside: avoid;
                width: 100%;
                height: 100px;
                margin-bottom: 10px;
                background: #ddd;
                column-gap: 0;
                text-align: center;
                color: #fff;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div class="waterfall-container">
            <div class="waterfall-item" style="height: 100px">1</div>
            <div class="waterfall-item" style="height: 300px">2</div>
            <div class="waterfall-item" style="height: 400px">3</div>
            <div class="waterfall-item" style="height: 100px">4</div>
            <div class="waterfall-item" style="height: 300px">5</div>
            <div class="waterfall-item" style="height: 600px">6</div>
            <div class="waterfall-item" style="height: 400px">7</div>
            <div class="waterfall-item" style="height: 300px">8</div>
            <div class="waterfall-item" style="height: 700px">9</div>
            <div class="waterfall-item" style="height: 100px">10</div>
        </div>
    </body>
    </html>
    
    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <...Docum...
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          body {
            background: rgb(58, 67, 76);
            background: url(../img/a.png), url(../img/bg.gif) rgb(58, 67, 76);
          }
          .box {
            column-count: 5;
            column-gap: 0;
            padding: 0 50px;
          }
          figure {
            border: 2px solid pink;
            padding: 5px;
            break-inside: avoid;
            color: rgb(255, 192, 203);
            text-align: center;
            font-size: 20px;
            margin: 0 5px 5px;
          }
          img {
            width: 100%;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <audio
            src="../audio/zhoujie.mp3"
            controls="controls"
            autoplay="autoplay"
          ></audio>
          <figure>
            <img src="../img/1.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/2.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/3.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/4.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/5.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/6.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/7.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/8.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/9.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/10.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/11.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/12.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/13.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/14.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/15.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/16.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/17.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/18.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/19.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/20.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/21.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/22.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/23.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/24.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/25.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/26.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/27.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/28.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
          <figure>
            <img src="../img/29.jpg" alt="" />
            <figcaption>往后余生,平淡是你</figcaption>
          </figure>
        </div>
      </body>
    </html>
    
    

    效果图:
    效果1

    展开全文
  • vue+flex实现简单的2列瀑布流

    千次阅读 2018-04-02 13:35:22
    (item,index) in itemsA" :key="index"> <im
  • 文档布局这是最基本的布局方式,就是按照文档的顺序一个一个显示出来,块元素独占一行,行内元素共享一行,这个相信大家都比较熟悉了,就不再赘述了。效果图:代码:&lt;!DOCTYPE html&gt; &lt;...
  • 1.瀑布流自适应高度 效果图如下所示 Vue中使用vue-waterfall2瀑布流 下载安装:npm install --save vue-waterfall2 之后会在node_modules生成相应的文件,感兴趣的可以仔细看一下它的源码实现 注意package.json内...
  • 微信小程序实现瀑布流

    千次阅读 2018-05-09 17:14:13
    CSS3 多实现column-count 定义几列column-gap 间距 wxml的布局 &lt;view class='content'&gt; &lt;block wx:for="{{dataArray}}" wx:key=""&gt; &lt;template is...
  • 手机版网页图片瀑布流,底部自动对齐,通过修改元素位置实现效果,完全自己实现,逻辑简单,可自己修改
  • 瀑布流,并且解决定位和容器高度自适应问题,随意放哪都可以用。
  • 这几天看了Amy老师的用javascript实现瀑布流,我跟着把代码敲出来。发现这样写只能第一次载入时适应屏幕,以后改变窗口大小就不能做到自适应了。 于是我想到了用window.onresize来使得瀑布流函数从新加载来达到...
  • Android瀑布流实现二

    2016-04-18 23:00:18
    public class FlowView extends ViewGroup { // 用来记录描述有多少行View private List<LineView> mLineViews = new ArrayList(); // 用来记录当前已经添加到了哪一行 private LineView mCurrentLineView;...
  • 前两天在公司的一个手机点餐项目组帮了几天忙,发现里面的点餐页面使用了瀑布流。我一直知道瀑布流布局但没有具体实现过,这两天下班抽空简单实现了一下。 <template> <div class="home"> <div ...
  • 瀑布流左右分割线均等设置!在网上看了很多例子,都是什么万能分割线之类的,但是真正用到瀑布流的分割线却会出现不一致的情况。原因:下面展示一下非瀑布流的item布局情况:上面那种布局相当于网格布局,每个item的...
  • 项目完整代码 ... } 瀑布流布局 修改fruit_item.xml TextView的对齐属性改成了居左对齐,因为之后展示的文字长度偏长 ...
  • android 瀑布流

    2012-08-28 19:35:53
    https://github.com/dodola/android_waterfall
  • 手把手教你用原生JS实现瀑布流

    千次阅读 多人点赞 2020-04-29 16:33:34
    看完这一篇一万字的blog,不可能不会瀑布流布局!!!
  • 用RecycleView来实现布局形式,默认只能指定一种布局格式,但是实际中我们的布局经常会用到多种类型的布局方式。如何实现呢? 今天来说下常用的2钟方式。 第一种: 通过自定义addHeadView方法来添加头布局 ...
  • 比如单个图片如何更好的展示,瀑布流布局都有哪些你不知道的实现方式。 接下来我们就直接进入正题,我们先从单张图片的展示说起。 设置宽或高 100% 因为图片其本身的独特性: 不设置宽高的情况下会按原有...
  • 实现页面瀑布流思路:使用CSS3属性column-count: number|auto;将容器元素分为两列,使用column-gap: length|normal;设置之间的间隔,使用break-inside: avoid使元素避免出现中断点。 效果截图: 注意:最重要的...
  • vue实现多组数据拼接的瀑布流方法

    千次阅读 2018-12-19 21:19:33
    最近写项目的时候碰到一个瀑布流的需求也是卡了非常久,一般的瀑布流方法无非是判断每一的高度,新数据加到矮的那一,还有就是用css3做,但是css3的数据添加是竖向排列的不符合我的要求。 我面对的需求如下: 有...
  • 小程序瀑布流组件

    千次阅读 2018-11-14 14:37:46
    前段时间,接到一个需求,要在小程序中实现不定高度的瀑布流布局。我首先去万能的百度上搜索了一波,确实有很多方案,但都是固定高度的,这和需求不符。于是决定自己写一个,考虑到后面也会有类似的需求,干脆做成一...
  • 传统界面的布局方式总是行列分明、坐落...这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这...
  • 瀑布流追加效果

    2018-08-22 10:36:28
    json只能用引号。 data[0].src data[2].title   追加条件:最后一个盒子的top值+其高度&lt;document高度值+滚动条滚动的值 &lt;script&gt; //模拟数据 var data=[{ "...
  • 第一个参数是上下文 第二个参数相对第三个参数而讲 如果是横向的代表三 如果是竖直的代表三行 第三个参数我们的布局管理器横向展示还是纵向展示 第四个参数是 true 从末尾展示,相反从头展示 瀑布流管理器 new ...
  • php+mysql+jquery瀑布流

    千次阅读 多人点赞 2014-02-16 21:42:36
    瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内...
  • angularjs 瀑布流

    2017-08-23 20:16:43
    2,瀑布流加载图片,应该也可以参考这个思路,但如果有这个需求:图片高度不一,新加载的图片要插入到列表中高度最小的那。则要再进一步思考 3,推荐下瀑布流排版 Masonry和AngularJS 无限滚动加载数据控件 ...
  • css3-使用多制作瀑布流

    千次阅读 2016-01-07 20:26:42
    <!DOCTYPE html> <title>Title <div class="container">
  • 今天想做个瀑布流,网上找了一圈,只找到这个可以点击看大图的框架,就拿来用了一下,效果还不错,推荐给大家,我们只是大自然的搬用工,让更多的人用到更好的框架,节省程序猿们的时间,谁有好的也可以给我推荐推荐...
  • CSS3&JavaScript 瀑布流

    2018-11-28 11:10:50
    html页面要实现瀑布流,目前有两种方案,它们的适用场景不同 CSS3 的 column-count(适用于所有元素一次性加载,页面更新用分页来实现,且元素与位置依赖度不高的传统布局上) CSS2 的 flot 配合 JavaScript ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,582
精华内容 1,032
关键字:

双列瀑布流