Css3瀑布流效果

最新推荐文章于 2022-05-07 21:46:36 发布
最新推荐文章于 2022-05-07 21:46:36 发布
阅读量415 收藏 1
点赞数
分类专栏： Css3效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <style type="text/css">
				
			 body{
		            background: #AAFFEE;
		            margin:10px;
		        }	
		      #page{
            			width:888px;
            			margin: 0 auto;
        			}
				
			   .col{
		            column-count:3;/*行*/
		            
		            column-gap: 10px; /*没行的每列间距*/
		            column-fill: auto;
		        }
		        
		        .pic{
		            box-sizing: border-box;
		            width: 290px;
		            background: #FFF;
		            padding: 20px;
		            box-shadow: 0 0 5px rgba(0,0,0,.5);
		            margin-bottom: 10px;
		            /*display: inline-block;*/
		        }
		        
		        .pic img{
		            width: 260px;
		        }
				
				
				
				
				
				
    </style>
</head>
<body>
    <div id="page">
        <div class="col">
            <div class="pic">
                <img src="img/1.jpg">
                <!--<p>埃菲尔铁塔（法语：La Tour Eiffel）设计新颖独特，是世界建筑史上的技术杰作，因而成为法国和巴黎的一个重要景点和突出标志。</p>-->
            </div>
            <div class="pic">
                <img src="img/2.jpg">
                <!--<p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>-->
            </div>
            <div class="pic">
                <img src="img/9.jpg">
                <!--<p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>-->
            </div>
            <div class="pic">
                <img src="img/4.jpg">
                <!--<p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>-->
            </div>
            <div class="pic">
                <img src="img/5.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/6.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/7.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/8.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/9.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/10.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/2.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/3.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/5.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/7.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/2.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/9.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/10.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/3.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
                        <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/2.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/9.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/10.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/3.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
                        <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/2.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/9.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/10.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/3.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
                        <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/2.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/9.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/10.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/3.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
                        <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/2.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/9.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/10.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/3.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            <div class="pic">
                <img src="img/1.jpg">
                <p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，被誉为世界五大宫之首。</p>
            </div>
            
        </div>
    </div>
</body>
</html>


li3196672779
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现瀑布流的两种方式
2401_82373036的博客
01-06 688
column。
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
【瀑布流布局】瀑布流的一个简单案例
liu_xiaoyang的博客
02-25 427
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瀑布.
干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果？
黑马程序员官方博客
01-25 353
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街   原理图:   在一个大盒子里，放置多个小盒子，小盒子的大小可以不一致，长短不一样，呈现一种瀑布流的效果。 使用CSS3S实现只需要如下4步: 1. 准备图片素材 2. 书写相应HTML结构 3. 了解CSS 多栏(Multi-column) 属性 4. 使用CSS 多栏属性完成瀑布流布局 一、第一步 ——...
CSS总结——瀑布流布局
热门推荐
qq_53008257的博客
05-07 4万+
瀑布流布局 瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式） 瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码 <div class="container" id="con"> <div class="item
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
通常，我们会使用JavaScript来动态计算和调整元素的位置，使其形成瀑布流效果。但CSS3中没有直接的原生方法实现这一点，因此，这个"纯CSS3"实现可能涉及了一些技巧，如使用伪元素、负margin等，以模拟瀑布流的视觉...
CSS3不规则瀑布流布局特效
04-02
CSS3不规则瀑布流布局特效则在此基础上进一步创新，通过引入倾角和滤镜效果，为网页增添了更丰富的视觉体验。 首先，我们来详细了解一下CSS3中的关键知识点： 1. **Flexbox（弹性盒布局）**：虽然瀑布流布局早期多...
纯css3 弹性布局瀑布流
11-04
"纯css3 弹性布局瀑布流"是一个关于利用CSS3特性实现动态、响应式的页面布局方法，特别适合展示图片或者内容卡片，如电商产品展示、摄影网站等。这种布局方式被称为“瀑布流”或“Masonry布局”，因其元素像流水一样...
css和js实现瀑布流效果示例
09-25
总的来说，CSS和JavaScript结合实现的瀑布流效果需要考虑元素的尺寸、定位、列数计算以及窗口大小变化的响应性。通过巧妙的布局和动态计算，可以创建出流畅、自适应的瀑布流布局，提供优秀的用户体验。在实际开发中...
jQuery+css3自加载瀑布流照片墙
10-27
5. **图片加载监听**：当图片加载完成后，使用jQuery调整图片容器的高度以匹配实际图片高度，维持瀑布流效果。 6. **无限滚动**：添加事件监听器，当用户滚动到页面底部时，触发jQuery的Ajax请求加载更多图片，并...
CSS3实现瀑布流布局与无限加载图片相册的实例代码
09-24
本篇文章主要介绍了CSS3实现瀑布流布局与无限加载图片相册的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
html li 做瀑布流,使用js来实现瀑布流效果
weixin_40002611的博客
06-27 182
使用js来实现瀑布流效果瀑布流的实现方法有很多种，我这次采用的是使用绝对定位的方法来实现。页面中包含一个容器ul(设置为relative)，然后所有添加的li都放在这个容器里面，li的宽度固定。在li进行显示的时候，是我们要先计算出总的列数，然后根据列数跟每列的宽度计算出容器的总宽度。显示li的时候就是从左往右填充各列，当第一行填充满了之后，就会寻找最短列，然后把li添加到最短列中。当屏幕发生变化...
css实现瀑布流布局
谢院柯的博客
04-30 5484
1.column 多行布局实现瀑布流 column 实现瀑布流主要依赖两个属性。 一个是 column-count 属性，是分为多少列。 一个是 column-gap 属性，是设置列与列之间的距离。 <style> .box { margin: 10px; column-count: 3; col...
css3实现瀑布流，解决火狐浏览器断层问题
qq_25687271的博客
07-21 2051
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。还是上张图来看看我们说的瀑布流布局是什么样子。   当初要实现这样的布局都是依赖于JavaScript来实现，所以当时出现过很多实现瀑布流布局的插件。比如Masonry、Isotope等都是非常有名的插件。但使用纯CSS来实现，当时还是非...
CSS3 - 多列属性详解(图片瀑布流)
zjsfdx的博客
02-16 2314
index.html<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片瀑布流</title> <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"> <link href="picBegin.css" re
纯css 实现瀑布流效果
Young_Gao的博客
06-24 1296
原理是 css 的 column 属性，话不多说直接上代码 <html> <head> <link rel="stylesheet" type="text/css" href="css/main.css"> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf...
实现瀑布流页面的两种方案(纯css3/js)
深度编程
01-11 2295
瀑布流页面设计最初我是在“花瓣”这个产品上看到的，最近一个电商网站也运用了这一设计方式，可能会显得产品更有特色吧。今天我们就讨论下怎么实现一个图片的瀑布流。 基本思路 通常数据以分页的形式从后端获取，前端加载图片，一行显示两个图片，图片高度要按比例显示。如果左侧图片高就把下一张图片放到右侧，相反如果右侧图片高，就把下一张图片放到左侧，这样可以保持整个页面的布局和谐。同时，在页面滚动到距下方50px...
纯CSS实现瀑布流布局的两种方案
Arlisol的博客
01-09 8683
博主最近在学习有关布局的相关知识，总结了使用纯CSS实现瀑布流布局的两种方案。 那么什么叫瀑布流布局呢？让我们通过图片来了解一下： 瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。 废话不多说，直接上方案： 1. 方案一，使用CSS3的column属性，具体实...
css利用flex实现瀑布流效果
weixin_44151448的博客
08-31 1447
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瀑布流效果</title> <style> /*去除原有的外边框和内边距*/
css 图片瀑布流实现
最新发布
07-28
要实现CSS图片瀑布流效果，你可以使用CSS的column属性，结合一些布局技巧来实现。以下是一个简单的示例代码： HTML代码： ```html <img src="image3.jpg" alt="Image 3"> <!-- 更多图片项 --> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值