css3多列布局瀑布流加载样式

最新推荐文章于 2022-06-03 17:11:00 发布
最新推荐文章于 2022-06-03 17:11:00 发布
阅读量112 收藏
点赞数
原文链接：http://www.cnblogs.com/li-sir/p/7170346.html
版权

看了一些网站的瀑布流加载，正好看到css3的多列属性，尝试着写了一个css做布局的瀑布流。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3多列属性瀑布流</title>
<style>
/*大层*/
.container{width:80%;margin: 0 auto;}
/*瀑布流层*/
.waterfall{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari 和 Chrome */
column-count:4; /* 用整数值来定义列数。不允许负值 */
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em; /*用长度值来定义列与列之间的间隙。不允许负值*/
}
/*一个内容层*/
.item{
padding: 1em;
margin: 0 0 1em 0;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #000;
}
.item img{
width: 100%;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="container">
<div class="waterfall">
<div class="item">
<img src="http://pic28.photophoto.cn/20130827/0005018340822440_b.jpg">
<p>1 convallis timestamp</p>
</div>
<div class="item">
<img src="http://pic48.nipic.com/file/20140912/7487939_223919315000_2.jpg">
<p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
</div>
<div class="item">
<img src="http://pic.58pic.com/58pic/13/61/00/61a58PICtPr_1024.jpg">
<p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula 
faucibus suscipit. Suspendisse rutrum turpis quis nunc 
convallis quis aliquam mauris suscipit.</p>
</div>
<div class="item">
<img src="http://pic.qiantucdn.com/58pic/22/06/55/57b2d98e109c6_1024.jpg">
<p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut 
sagittis vitae, egestas at augue. </p>
</div>
<div class="item">
<img src="http://dynamic-image.yesky.com/740x-/uploadImages/2014/289/01/IGS09651F94M.jpg">
<p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>


<div class="item">
<img src="http://pic37.nipic.com/20140105/9996485_124205238150_2.jpg">
<p>6 convallis timestamp</p>
</div>
<div class="item">
<img src="http://sc.jb51.net/uploads/allimg/150623/14-150623111Z1308.jpg">
<p>7 convallis timestamp 2 Donec a fermentum nisi. </p>
</div>
<div class="item">
<img src="http://img0.imgtn.bdimg.com/it/u=848233399,609023395&fm=214&gp=0.jpg">
<p>8 Nullam eget lectus augue. Donec eu sem sit amet ligula 
faucibus suscipit. Suspendisse rutrum turpis quis nunc 
convallis quis aliquam mauris suscipit.</p>
</div>
<div class="item">
<img src="http://img3.imgtn.bdimg.com/it/u=3242709860,2221903223&fm=214&gp=0.jpg">
<p> 9 Donec a fermentum nisi. Integer dolor est, commodo ut 
sagittis vitae, egestas at augue. </p>
</div>
<div class="item">
<img src="http://pic.58pic.com/58pic/14/26/07/04R58PICFJm_1024.jpg">
<p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>
<div class="item">
<img src="http://img0.imgtn.bdimg.com/it/u=2478517127,62785200&fm=214&gp=0.jpg">
<p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>
<div class="item">
<img src="http://pic28.photophoto.cn/20130828/0005018351465470_b.jpg">
<p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>
<div class="item">
<img src="http://pic28.photophoto.cn/20130827/0005018340822440_b.jpg">
<p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>
<div class="item">
<img src="">
<p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>
<div class="item">
<img src="http://dynamic-image.yesky.com/740x-/uploadImages/2014/289/01/IGS09651F94M.jpg">
<p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>


<div class="item">
<img src="http://pic37.nipic.com/20140105/9996485_124205238150_2.jpg">
<p>6 convallis timestamp</p>
</div>
<div class="item">
<img src="http://sc.jb51.net/uploads/allimg/150623/14-150623111Z1308.jpg">
<p>7 convallis timestamp 2 Donec a fermentum nisi. </p>
</div>
<div class="item">
<img src="http://img0.imgtn.bdimg.com/it/u=848233399,609023395&fm=214&gp=0.jpg">
<p>8 Nullam eget lectus augue. Donec eu sem sit amet ligula 
faucibus suscipit. Suspendisse rutrum turpis quis nunc 
convallis quis aliquam mauris suscipit.</p>
</div>
<div class="item">
<img src="http://img3.imgtn.bdimg.com/it/u=3242709860,2221903223&fm=214&gp=0.jpg">
<p> 9 Donec a fermentum nisi. Integer dolor est, commodo ut 
sagittis vitae, egestas at augue. </p>
</div>
<div class="item">
<img src="http://pic.58pic.com/58pic/14/26/07/04R58PICFJm_1024.jpg">
<p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>
<div class="item">
<img src="http://img0.imgtn.bdimg.com/it/u=2478517127,62785200&fm=214&gp=0.jpg">
<p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
</div>
</div>
</div>
</body>
</html>

 

具体实现样式是这样的（ps:）

 

 

转载于:https://www.cnblogs.com/li-sir/p/7170346.html

weixin_30300523
关注
关于CSS3中Columns实现瀑布流布局
m0_46438177的博客
07-28 5973
简单实现 场景：需要对一下等宽不等长的块进行瀑布流布局。 html代码（只是简单的写了一下，这里可以用v-for） <div class="contents_list"> <div class="content_one"> <img src="******"/> <p>一些对图片的描述文字</p> </div> <div> <img src="******"/> <p>一些对图片
横版瀑布流自动排序及页面左右滑动
03-14
页面横版瀑布流,自适应高度,鼠标滚轴控制页面左右滑动 适应IE 360 百度 chrome
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
纯css3实现横向瀑布流布局，让图片看起来更美观。
HTML＋CSS＋JS 瀑布流式布局（实现懒加载）
qq_44386537的博客
12-27 9028
HTML + JS＋CSS实现瀑布流式布局（包含懒加载） 前几天兴致来了想做一个瀑布流布局的网页，然后就有了各种“神操作”，也在网上看了一些相关的知识点；所以这里对自己这几个小时来一个总结 先上效果图 首先来说一下瀑布流的原理吧：瀑布流是许多数据块组成的，可以是图片，可以是div，但是它们都有一个特点，就是等宽不等高，正是因为它等宽不等高，所以如果按部就班的排布的话，才会出现很大的缝隙，特别不好看，说白了瀑布流布局就是充分利用图片之间的空隙来合理的布局，使布局看起来好看，符合人眼的审美。 首先上CSS布局
使用css3的网格(Grid),做出瀑布流式布局
qq_40544291的博客
03-09 4781
效果如下: 关于网格grid,就看大神阮一峰的Grid 网格布局教程 效果的代码如下: html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
纯css实现左右两栏的瀑布流布局
Candy_mi的博客
01-14 7252
图下：   关键css:     代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;左右两栏布局&lt;/title&gt; &lt;style&amp
【Css】使用多列布局实现图片瀑布流
点滴记忆
06-03 617
<!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+css实现瀑布流布局(无限加载)
huanhuan03的博客
03-09 1079
jQuery+css瀑布流 无限加载
css3中的column属性实现多列布局和瀑布流布局
m0_60782710的博客
04-15 1871
在css3中有新增column属性可以实现页面的排版，使得页面更加整洁，现在一一为大家介绍用法以及属性值。 columns：用于设置元素的列宽和列数。它是column-width和column-count的简写属性。 语法：columns: <'column-width'> || <'column-count'>; column-width：用来设置列宽，取值auto和像素值，实际宽度可能会更宽或更窄以适合可用空间。 column-count：用来设置元素内容被划分成几列
css页面特效--多列与瀑布流效果
hepei_i的博客
05-08 4470
1、多列在css3中，可以创建多列来对文本或者区域进行布局属性：    column-count：列数    column-gap：距离    column-rule：线及线的颜色HTML文件为：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;tit
也许是最简单的纯 CSS 实现瀑布流布局！！！
dizuncainiao的博客
03-27 4542
或许是最简单的纯 css 实现瀑布流的方式~~
CSS3实现瀑布流布局与无限加载图片相册的实例代码
12-13
总结来说，这个实例展示了如何利用CSS3和jQuery Masonry插件创建一个瀑布流布局的图片相册，并通过AJAX实现无限加载功能。通过这种方式，用户可以在浏览过程中享受到平滑的滚动体验，同时，服务器资源得到有效的利用...
纯css3 弹性布局瀑布流
11-04
"纯css3 弹性布局瀑布流"是一个关于利用CSS3特性实现动态、响应式的页面布局方法，特别适合展示图片或者内容卡片，如电商产品展示、摄影网站等。这种布局方式被称为“瀑布流”或“Masonry布局”，因其元素像流水一样...
瀑布流布局，点击加载更多效果
10-18
在实现瀑布流布局时，layui的CSS可以帮助我们设定元素的样式，使其符合瀑布流的视觉效果。同时，layui的JavaScript模块可以与jQuery结合使用，实现动态加载和交互功能。 例如，我们可以使用layui的`layui.layer`...
jQuery+css3自加载瀑布流照片墙
10-27
3. **Grid布局**：CSS Grid提供了二维布局系统，适用于创建复杂的网格结构，也可以应用于瀑布流布局，尤其是在多列布局时。 4. **过渡（Transitions）与动画（Animations）**：CSS3的过渡和动画可以为元素添加平滑的...
(源码)基于JavaWeb的饮品销售管理系统.zip
最新发布
11-15
# 基于Java Web的饮品销售管理系统 ## 项目简介 本项目是一个基于Java Web的饮品销售管理系统，主要用于学校实训课程的作业。系统涵盖了从用户管理、商品管理、订单管理到购物车管理的全套功能，旨在提供一个完整的在线饮品销售解决方案。 ## 项目的主要特性和功能 ### 用户管理 用户注册与登录支持用户注册新账号和登录系统。 用户信息管理包括用户信息的查询、修改和删除。 用户类型管理区分不同类型的用户（如管理员、普通用户）。 ### 商品管理 商品CRUD操作支持商品的添加、修改、删除和查询。 商品分类管理支持多级商品分类的查询和管理。 商品分页查询支持按页查询商品信息，提高查询效率。 ### 订单管理 订单CRUD操作支持订单的创建、修改、删除和查询。 订单明细管理支持订单明细的添加和管理。 订单状态管理支持订单状态的更新和查询。 ### 购物车管理
BitmapFunc.rar
11-15
BitmapFunc
c++课程设计-产品入库管理操作系统.zip
11-15
c++课程设计-产品入库管理操作系统
c语言火车票订票管理源码.rar
11-15
c语言火车票订票管理源码
Ionic3构建图片瀑布流布局实战教程
这种布局的特点是随着用户滚动页面，内容会以不规则的多列形式持续加载。 在 Ionic3 中实现瀑布流布局，首先需要理解其基本原理和步骤。以下是详细的实现过程： 1. 创建项目和模块：首先，你需要创建一个新的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值