css3实现瀑布流效果

最新推荐文章于 2024-01-06 22:22:04 发布
最新推荐文章于 2024-01-06 22:22:04 发布
阅读量430 收藏
点赞数
分类专栏： css3 文章标签： css3 瀑布流效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36341800/article/details/54948879
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3瀑布流布局</title>
		<style type="text/css">
			body {
				background-color: #f1f1f1;
			}
			.container {
				width: 60%;
				margin: 0 auto;
				font-size: 14px;
				color: #333;
			}
			.column-box {
				-moz-column-count: 3;
				-webkit-column-count: 3;
				column-count: 3;
				-moz-column-gap: 1em;
				-webkit-column-gap: 1em;
				column-gap: 1em;
			}
			.column-item {
				padding: 0.2em;
				-moz-page-break-inside: avoid; /*避免在元素内部插入分页符*/
				-webkit-column-break-inside: avoid;
				break-inside: avoid;
				background: white;
				-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
				-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
				box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);
			}
			.column-item img.bigimg {
				width: 100%;
				padding-bottom: 1em;
				border-bottom: 1px solid #ccc;
			}
			.verticalAlign {
				vertical-align: middle;
			}
			.user {
				padding-bottom: 0.5em;	
			}
			.user p {
				font-size: 14px;
				color: #666;
				padding: 0;
				line-height: 8px;
			}
			.user p:first-child {
				padding-top: 8px;
			}
			.user p span {
				font-size: 12px;
				color: #999;
			}
			.column-item-2 {
				width: 20%;
				float: left;
			}
			.column-item-2 img {
				width: 100%;
				border-radius: 50%;
			}
			.column-item-2 img:after {
				content: '
最低0.47元/天 解锁文章
frontEnd-Engineer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css3实现瀑布流
张鹏~IT~少年人的博客
12-13 1988
1、html代码 <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item">...
CSS3实现瀑布流布局
weixin_30824599的博客
07-23 177
讲干货，不啰嗦，瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过CSS3的多列（Multi-column）属性，可以简单的实现类似效果。 具体步骤： 1.设置外部容器多列列数（column-count）和列间距（column-gap） 2.设置内容条目的break-inside属性为avoid，使条目总体不被打断。 HTML结构： <div class="cont...
纯CSS3手写 管道流水动效
c_qianxia5040的博客
04-01 1656
<!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>管道流
CSS3的学习--实现瀑布流
weixin_34138521的博客
06-08 84
基于CSS3实现瀑布流，使用CSS3的CSS 多栏(Multi-column)。 可以到github上下载源码 : https://github.com/CraryPrimitiveMan/waterfall-css3 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。我们只是实现了多栏的布...
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
6. **实现瀑布流的关键**：在纯CSS3的横向瀑布流布局中，关键在于如何处理不同高度的子元素。通常，我们会使用JavaScript来动态计算和调整元素的位置，使其形成瀑布流效果。但CSS3中没有直接的原生方法实现这一点，...
css和js实现瀑布流效果示例
09-25
接下来是JavaScript部分，这部分代码使用了一个自定义的jQuery插件来实现瀑布流效果。插件的核心在于计算每列的高度并动态调整元素的位置。`var defaults` 是默认参数，`$.fn.waterfal` 是插件函数，接受一个选项...
CSS3不规则瀑布流布局特效
04-02
通过设定`grid-template-columns`和`grid-template-rows`，我们可以精确控制网格的行和列，实现瀑布流的效果。 3. **Transforms（变形）**：CSS3的`transform`属性用于改变元素的位置、尺寸或角度。在不规则瀑布流...
jquery+css3实现瀑布流照片墙特效
04-06
jquery+css3实现瀑布流照片墙特效是一款效果非常酷的照片墙作品，展示相片的效果非常大气。
CSS总结——瀑布流布局
热门推荐
qq_53008257的博客
05-07 4万+
瀑布流布局 瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式） 瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码 <div class="container" id="con"> <div class="item
简单的瀑布流布局
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-20 214
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> </head> <style> .box { height:123px; padding:1em; margi...
CSS实现瀑布流的两种方式
2401_82373036的博客
01-06 690
column。
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
纯CSS3多列的瀑布流布局演示
Mary201572的博客
08-14 1314
纯CSS3多列的瀑布流布局演示 网上的瀑布流布局大部分都是通过JS来求定位，但现在css3也可以做到了，你不需要使用一点js，就可以做出一个反应快速的CSS3瀑布流布局。 html代码： 1 convallis timestamp 2 Donec a fermentum nisi. 3 Nullam eget lectus augue.
纯CSS实现瀑布流布局
LuviaWu的博客
04-21 2万+
瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个
svg+css3 模拟管道水流效果,限chrome
Neil的专栏
08-04 1万+
.water {             stroke-dasharray: 1000;             stroke-dashoffset: 1000;             animation: dash 5s linear 1;         }                   .no-water {             stroke-dasharray:
css3（五）浮动、定位、溢出处理
qq_38904347的博客
08-28 694
浮动float属性 left：元素向左浮动 right：元素向右浮动 none：默认值。元素不浮动，并会显示在其文本中出现的位置 浮动元素不在标准文档流中 清除浮动clear属性 left：在左侧不允许浮动元素 right：在右侧不允许浮动元素 both：在左、右两侧不允许浮动元素 none：默认值。允许浮动元素出现在两侧 定位position属性 static：默认值，没有定位...
CSS3实现光束和波浪
findhappy117的博客
01-30 4144
概述 经常在网上看到一些网站做一些波浪和光束的特效，以为是flash实现，看过代码后，突然发现，竟然是css3实现的，太强大了。于是分享这个案例，希望能帮到您。 代码地址如下： http://www.demodashi.com/demo/10150.html
html5 流水效果,svg+css3 模拟管道水流效果,限chrome
weixin_28885791的博客
06-03 1847
下面是编程之家 jb51.cc 通过网络收集整理的代码片段。编程之家小编现在分享给大家，也给大家做个参考。.water {stroke-dasharray: 1000;stroke-dashoffset: 1000;animation: dash 5s linear 1;}.no-water {stroke-dasharray: 1000;stroke-dashoffset: 1000;}.fir...
RGBA(0,0,0,0)调色
小夜丶凝眸的博客
08-04 4万+
      前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。第四个值，alpha值，制定了色彩的透明度/不透明度，它的范围为0.0到1.0之间,0.5为半透明。比如，如果你想要纯粹的红色作为背景色，你就可以设置为100%红，0%绿和0%蓝。      rgba(255, 255, 255, 0)则表示完全透明的白色     ...
css grid布局实现瀑布流
最新发布
05-25
使用 CSS Grid 布局可以实现瀑布流布局，具体步骤如下： 1. 在父元素上应用 grid 布局，将其划分为多个网格列，每一列的宽度相等，并且宽度可以根据需要进行调整。 2. 将子元素放置到网格中，使用 grid-row-start ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值