页面布局瀑布流的写法(CSS写法)

最新推荐文章于 2024-09-09 12:23:47 发布
最新推荐文章于 2024-09-09 12:23:47 发布
阅读量3.3k 收藏
点赞数
分类专栏： HTML/CSS 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>瀑布流布局</title>
		<link rel="stylesheet" type="text/css" href="css/styleCSS.css"/>

	</head>
	<body>
		<div id="main">
			<div class="box">
				<div class="pic">
					<img src="img/0.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/1.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/2.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/3.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/4.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/5.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/6.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/7.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/8.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/9.jpg"/>
				</div>
			</div><div class="box">
				<div class="pic">
					<img src="img/10.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/11.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/12.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/13.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/14.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/15.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/16.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/17.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/18.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/19.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/20.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/21.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/22.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/23.jpg"/>
				</div>
			</div><div class="box">
				<div class="pic">
					<img src="img/24.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/25.jpg"/>
				</div>
			</div><div class="box">
				<div class="pic">
					<img src="img/26.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/27.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/28.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/29.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/30.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/31.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/32.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/33.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/34.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/35.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/36.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/37.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/38.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/39.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/40.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/41.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/42.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/43.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/44.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/45.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/46.jpg"/>
				</div>
			</div>
			<div class="box">
				<div class="pic">
					<img src="img/47.jpg"/>
				</div>
			</div>
		</div>
	</body>
</html>


*{margin: 0;padding: 0;}
#main{position: relative;}
.box{padding: 15px 0 0 15px; float: left;}
.pic{padding: 10px; border: 1px solid #CCCCCC;border-radius: 5px;
 box-shadow: 0 0 5px #ccc;
}
.pic img{width: 165px; height: auto;}

swrd2014
关注
专栏目录
原生CSS瀑布流写法:flex,position,column-count,效果图及缺点
Cvory
05-18 830
原生CSS瀑布流写法 1. 设置column-count： 原理： 将子元素分两列展示，从而实现简单的瀑布流布局 效果： 缺点： 纵向布局，和现在市面以及用户的使用习惯不符 需要一次性拿到所有数据（与瀑布流的数据处理方式不符） 2. 使用flex布局 code： display:flex; flex-wrap:wrap 原理： 超出一行的向下横向布局 效果： 缺点： 虽然是横向布局，但是每一行是不能上下插空 3. 使用position：absolute 效果： 原理： 计算每一个块的位置，赋
关于CSS3中Columns实现瀑布流布局
m0_46438177的博客
07-28 5961
简单实现 场景：需要对一下等宽不等长的块进行瀑布流布局。 html代码（只是简单的写了一下，这里可以用v-for） <div class="contents_list"> <div class="content_one"> <img src="******"/> <p>一些对图片的描述文字</p> </div> <div> <img src="******"/> <p>一些对图片
CSS 实现瀑布流布局
油墨香^-^的博客
06-23 660
多列布局 colum-count：属性设置列的具体个数 colum-width：属性控制列的宽度 column-gap：两列之间的列间距 column-rule：规定列之间的分割线的宽度、样式和颜色 column-span：规定元素应横跨多少列（1：不跨列（默认）；all：跨所有列） 实例： 瀑布流 /* 父元素 */ column-count: 2; column-gap: 10px; /* 子元素 */ break-inside: avoid; 实例：......
css实现瀑布流布局
web前端开发
01-02 705
作者 | 李美超链接 | https://blog.limeichao.cn/article/ec28b177.html实现思路依赖 column 便可实现最简单实用的瀑布流布局。代码...
如何使用CSS实现一个瀑布流布局
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-09 1495
瀑布流布局，也称为砖墙布局或 Masonry Layout，是一种在网站上排列元素（通常是图像或其他内容块）的方式，使得每个元素在其前面的元素下方开始新的一列。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。使用Flexbox可以创建一个简单版本的瀑布流效果，但这种方法并不完全满足瀑布流的需求，因为元素会按照固定的高度顺序排列。在这个例子中，我们需要通过JavaScript来动态计算每列的高度，并将新元素放置在当前最低的列中。专栏系列（点击解锁）
css 瀑布流布局_瀑布流布局实现方法
weixin_39815600的博客
11-23 270
最近有一个项目要做成瀑布流布局，研究了一下，想到两个方案，一个是使用css的flex，一个是使用masonry。这里先说一下flex的布局以下属性注意使用：1、column-count 把div中的文本分为多少列2、column-width 规定列宽3、column-gap 规定列间隙4、break-inside: avoid; ←在制作手机站瀑布流时候，会出现图片错乱，请使用这个属性：避免元素内...
css制作瀑布流布局
m0_74265396的博客
11-18 1046
【代码】css制作瀑布流布局。
页面布局瀑布流的写法(原生js)
u014041540的博客
09-18 672
瀑布流布局
CSS3使用多列制作瀑布流
09-27
CSS3，即层叠样式表第三版，是在传统CSS基础上加入了许多新特性的版本，其中利用CSS3多列属性制作瀑布流布局是前端设计中的一个亮点。瀑布流布局因其错落有致的视觉效果广泛应用于图片展示、新闻列表、产品展示等...
纯CSS瀑布流与JS瀑布流
在线学习web前端开发教程
12-21 143
瀑布流 又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 为什么使用瀑布流 瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时...
vue实现瀑布流
qq_43046897的博客
10-18 1247
最近项目要加一个瀑布流的页面，像这样： 一开始我想着直接写一个容器，容器的css属性加上column-width: 50%;和column-count: 2;为了避免在主体框中插入任何中断，需要向容器内子元素的css加上一个break-inside: avoid;但是这种写法有一个问题就是排列顺序是左边显示前一半，右边显示后一半，像这样： 而我需要的是那种每条数据根据左右区域的高度来判断这条数...
纯CSS3实现瀑布布局
leeandmins的博客
09-29 797
以下是我用css实现的：         CSS3瀑布布局             .container{ -webkit-column-width:160px;                -moz-column-width:160px;                 -o-colum-width:160px;                
CSS总结——瀑布流布局
weixin_62980497的博客
09-02 596
瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。布局实现，还没有学习过这种方式）
CSS瀑布流式布局
sunshineTing2的博客
06-11 297
CSS瀑布流式布局 两行CSS实现瀑布流 column-count: 2; // 几列 column-gap: 80px; // 列间距 .flowBox{ column-count: 2; // 几列 column-gap: 80px; // 列间距 .flowItem{ break-inside: avoid; } } <div class="flowBox"> <div class="flowItem">内容块<
CSS问题：如何实现瀑布流布局？
m0_74802419的博客
11-28 2227
在电商前台项目中，使用瀑布流的布局形式，展示商品图片列表。 让用户在浏览商品列表时，总有商品图片看不全，使用户可以无限滚动地查看列表下面的其它商品内容。 进而提高用户浏览量，增加商品曝光度，最终提升用户购买几率。
Css实现瀑布流布局
明知山
09-21 345
效果图 <div class="waterfall"> <div class="poster"> <div class="pic"> <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190920...
css3中的多列布局！也就是传说中的瀑布流布局
csdncsdn9876的博客
06-16 302
其实看标题觉得很牛逼。真的也没什么牛逼的了。也就是一个多列布局而已。上涨图 这里面最主要的属性就是column-count。只要在一个盒子中设置了column-count（n）列数之后，浏览器会自动将你的内容在盒子中以最佳的方式排布。就是这么简单的一回事。没什么好觉得难的。
兼容IE8的jQuery瀑布流布局解决方案
瀑布流布局需要利用CSS3的一些特性，例如媒体查询、弹性盒（flexbox）或网格布局（grid），来实现响应式设计和多列布局。但由于资源需要兼容IE8，可能会使用一些旧的CSS技巧和方法，如使用float布局。 5. 兼容IE8 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值