css-照片瀑布流显示

最新推荐文章于 2022-06-03 17:11:00 发布
最新推荐文章于 2022-06-03 17:11:00 发布
阅读量554 收藏
点赞数 1
分类专栏： 前端工程师
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZi_Angel/article/details/50814611
版权

利用css代码实现照片瀑布流显示：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流图片效果</title>
    <link href="stylepubuliu.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <div><img src="img/1.jpg" width="350px" />
        <p>标签显示</p></div>
        <div><img src="img/2.jpg" width="350px" /></div>
        <div><img src="img/3.jpg"width="350px"  /></div>
        <div><img src="img/4.jpg" width="350px" /></div>
        <div><img src="img/5.jpg" width="350px" /></div>
        <div><img src="img/6.jpg" width="350px" /></div>
        <div><img src="img/7.jpg"width="350px"  /></div>
        <div><img src="img/8.jpg" width="350px" />
            <p>标签显示</p>
        </div>
        <div><img src="img/9.jpg" width="350px" /></div>
        <div><img src="img/11.jpg" width="350px" /></div>
        <div><img src="img/22.jpg" width="350px" /></div>
        <div><img src="img/33.jpg" width="350px" /></div>
        <div><img src="img/44.jpg"width="350px"  /></div>
        <div><img src="img/55.jpg"width="350px"  /></div>
        <div><img src="img/66.jpg"width="350px"  />
            <p>标签显示</p></div>
        <div><img src="img/1.jpg" width="350px" /></div>
        <div><img src="img/2.jpg" width="350px" /></div>
        <div><img src="img/3.jpg"width="350px"  />
            <p>标签显示</p></div>
        <div><img src="img/4.jpg" width="350px" /></div>
        <div><img src="img/5.jpg" width="350px" /></div>
        <div><img src="img/6.jpg" width="350px" /></div>
        <div><img src="img/7.jpg"width="350px"  /></div>
        <div><img src="img/8.jpg" width="350px" />
            <p>标签显示</p></div>
        <div><img src="img/9.jpg" width="350px" /></div>
        <div><img src="img/11.jpg" width="350px" /></div>
        <div><img src="img/22.jpg" width="350px" /></div>
        <div><img src="img/33.jpg" width="350px" /></div>
        <div><img src="img/44.jpg"width="350px"  /></div>
        <div><img src="img/55.jpg"width="350px"  /></div>
        <div><img src="img/66.jpg"width="350px"  /></div>
        <div><img src="img/1.jpg" width="350px" />
            <p>标签显示</p></div>
        <div><img src="img/2.jpg" width="350px" /></div>
        <div><img src="img/3.jpg"width="350px"  /></div>
        <div><img src="img/4.jpg" width="350px" /></div>
        <div><img src="img/5.jpg" width="350px" /></div>
        <div><img src="img/6.jpg" width="350px" /></div>
        <div><img src="img/7.jpg"width="350px"  /></div>
        <div><img src="img/8.jpg" width="350px" /></div>
        <div><img src="img/9.jpg" width="350px" /></div>
        <div><img src="img/11.jpg" width="350px" /></div>
        <div><img src="img/22.jpg" width="350px" /></div>
        <div><img src="img/33.jpg" width="350px" /></div>
        <div><img src="img/44.jpg"width="350px"  /></div>
        <div><img src="img/55.jpg"width="350px"  /></div>
        <div><img src="img/66.jpg"width="350px"  /></div>
        <div><img src="img/1.jpg" width="350px" /></div>
        <div><img src="img/2.jpg" width="350px" /></div>
        <div><img src="img/3.jpg"width="350px"  /></div>
        <div><img src="img/4.jpg" width="350px" /></div>
        <div><img src="img/5.jpg" width="350px" /></div>
        <div><img src="img/6.jpg" width="350px" /></div>
        <div><img src="img/7.jpg"width="350px"  /></div>
        <div><img src="img/8.jpg" width="350px" /></div>
        <div><img src="img/9.jpg" width="350px" /></div>
        <div><img src="img/11.jpg" width="350px" /></div>
        <div><img src="img/22.jpg" width="350px" /></div>
        <div><img src="img/33.jpg" width="350px" /></div>
        <div><img src="img/44.jpg"width="350px"  /></div>
        <div><img src="img/55.jpg"width="350px"  /></div>
        <div><img src="img/66.jpg"width="350px"  /></div>


    </div>
</body>
</html>
.container{
    column-width: 360px;
    -moz-column-width: 360px;
    column-gap: 5px;
    -moz-column-gap: 5px;
}
.container div{
    width:360px;
    margin: 5px 0;
}
p{
    text-align: center;
}
效果图如下所示：


YZiAngel
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js瀑布流图片加载提示
08-20
js瀑布流图片加载提示,可以自行连接mysql数据库实现,不会的话私聊我
图片瀑布流显示
cp123153的博客
02-09 339
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
瀑布流图片
mumu42的博客
09-26 220
瀑布流图片 要点： 1、宽度相同，高度不同。2、每张图片定位到高度最小的列（每一列高度用数组arr保存）
图片瀑布流
wq199909的博客
07-12 139
技术要求： 1. 所有的图片适用绝对定位 2. 使用JS设置图片的位置 3. 要求所有的图片等宽 图片的异步加载问题： 当图片设置了src属性之后，不会同步完成图片加载，而是异步（不影响当前代码的执行） 图片中有onload事件，该事件是图片加载完成之后触发。 index.html <!DOCTYPE html> <html lang="en"> &lt...
瀑布流
hahahhahahahha123456的博客
09-06 533
5.1、案例分析 瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应； 使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获取图片的高度，控制从第二行开始的图片先排在上一行中高度最低的下面，以此形成瀑布流的布局； 使用window.onresize，当窗口大小变化的时候重新计算窗口宽度，以重新进行排版； 使用wind...
jquery+css3实现瀑布流照片墙特效
04-06
jquery+css3实现瀑布流照片墙特效是一款效果非常酷的照片墙作品，展示相片的效果非常大气。
CSS3不规则瀑布流布局特效
04-02
CSS3不规则瀑布流布局特效是一款纯CSS3实现倾角瀑布流特效，带滤镜效果。
jQuery+css3自加载瀑布流照片墙
10-27
jQuery+css3自加载瀑布流照片墙
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
纯css3实现横向瀑布流布局，让图片看起来更美观。
纯css3 弹性布局瀑布流
11-04
纯css3 弹性布局瀑布流
【Css】使用多列布局实现图片瀑布流
点滴记忆
06-03 512
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
jquery 瀑布流实例最流行瀑布流图片展示
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-09 635
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。 文章目录jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。一、作品演示二、代码目录三、代码实现四、web前端入门到高级(视频+源码+资料+面试)一整
【四二学堂】纯css实现图片瀑布流布局
qq_38187437的博客
12-01 2240
先看一下效果图： 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。 在css中，早已实现了瀑布流布局，这里用css做的一个瀑布流案例。废话不多说，直接上代码。 &lt...
图片的瀑布流布局显示
weixin_30542079的博客
02-26 104
step1: 计算可容纳的列数： var col = Math.floor(window.innerWidth/img.offsetWidth) step2:剩余的宽度用来分配给水平间距 var hgap = window.innerWidth%img.offsetWidth/(col+ 1)　 推导过程： 第一列： left = hgap * 1 + im...
利用css与html生成瀑布流图片展示
qq_36389107的博客
08-30 2955
所谓瀑布流，就是想瀑布一样展示图片。不对图片经行处理让图片达到自动排版的效果。让图片展示变得美观。 不说废话了，上代码就行了。有需要的拿去用吧。&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&g
css 流式布局 图片
小武的博客
07-07 1444
效果图如下： html代码如下： <div class="masonry"> <div *ngFor="let item1 of imgs"> <div class="item"><img [src]="item1.img" style="width: 100%"></div> </div> </div> css代码如下： .masonry { -moz-colum...
CSS实现照片卡片瀑布流布局（两列）
机智的奎哥的博客
08-31 2270
1.问题： 今天遇到了需要实现一个卡片的瀑布流布局的问题，卡片高度是不同的。 最后使用css3中的column属性实现了这个布局，而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现的…naive啊) 实现效果大概如下图～ 2.实现方法 ...
简单的瀑布流效果
silno的专栏
08-10 293
折腾几天，终于做了个简单的无插件的瀑布流效果 直接上代码，可以实际使用。有需要的拿去参考。手机竖屏显示2列，横屏显示3列。电脑根据浏览器大小显示2-4列，具体列数可根据需要调整。 图片是效果截图。图片资料自己准备 <!DOCTYPE html> <meta charset="utf-8" /> <body> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> &lt
详解网页中的瀑布流显示效果
EdwardXu的博客
04-21 5020
网页实现瀑布流显示效果 本网页基于JQuery框架。 瀑布流是什么？瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。——摘自百度百科“瀑布流”瀑布流布局的几个特征： 1. 单元格宽固定，高不固定。 2. 每单元格从左到右依次排列，当第一行排满后，剩余的单元格依次排在当前最短的列后。单元格
uni-app瀑布流
最新发布
09-13
3. 使用 CSS 样式对生成的元素进行布局，可以使用 Flex 布局或者 Grid 布局来实现瀑布流效果。 4. 可以通过监听页面滚动事件，在滚动到底部时加载更多数据。 具体实现方式可以参考 Uni-app 官方文档中的相关示例和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值