css3多列及瀑布流效果
css3内容分块,多列效果(类似报纸版块排版):
.div02{
/*count:内容分为几列,gap:内容与分割线的距离,rule:分割线样式*/
column-count:;
column-gap:30px;
column-rule:5px outset #ff0000;
-webkit-column-count:;
-webkit-column-gap: 30px;
-webkit-column-rule: 5px outset #ff0000;
}
css3实现图片瀑布流排版:
.container {
column-width: 350px;
-webkit-column-width: 350px;
column-gap: 5px;
-webkit-column-gap: 5px;
} img {
width: 400px;
} .container div {
width: 350px;
margin: 5px;
} p {
text-align: center;
}
瀑布流效果html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="pubuliu.css" />
</head>
<body>
<div class="container">
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/2.jpg" /><p>文字描述</p></div>
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/2.jpg" /></div>
<div><img src="../../image/5.jpg" /><p>文字描述</p></div>
<div><img src="../../image/3.jpg" /></div>
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/3.jpg" /></div>
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/5.jpg" /><p>文字描述</p></div>
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/5.jpg" /><p>文字描述</p></div>
<div><img src="../../image/5.jpg" /></div>
<div><img src="../../image/5.jpg" /></div>
</div>
</body>
</html>
css3多列及瀑布流效果的更多相关文章
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
- WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
- [Android Pro] RecyclerView实现瀑布流效果(二)
referece to : http://blog.csdn.net/u010687392 在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutMa ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- css基础之 图片瀑布流布局:用CSS+DIV等宽格子堆砌瀑布流效果 (一)
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
- Android UI 之WaterFall瀑布流效果
所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容. 语言描述比较抽象,具体效果看下面的截图: ...
- RecyclerView实现瀑布流效果(二)
在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutManager.GridLayoutManager.StaggeredGridLayoutMan ...
- web页面和小程序页面实现瀑布流效果
小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1).加载图片,获取图片的宽高度: 2).根据页面需要显示几列计算每列的宽度: 3).根据图片真实宽度和每列的宽度比,计算出图片需要显示的 ...
随机推荐
- docker managed volume - 每天5分钟玩转 Docker 容器技术(40)
docker managed volume 与 bind mount 在使用上的最大区别是不需要指定 mount 源,指明 mount point 就行了.还是以 httpd 容器为例: 我们通过 - ...
- Maven学习专题--Maven入门及安装
因为项目需要,新项目需要使用Maven开发,但是组内大部分没有接触过maven.我就毅然承担搭建maven环境的任务了.因为一切重头开始,就想把自己的整个搭建环境.项目创建.框架整合和模块管理整个过程 ...
- JavaScript一个简易枚举类型实现扑克牌
<script type="text/javascript"> /** * 这个函数创建一个新的枚举类型,实参对象表示类的每个实例的名字和值 * 返回值是一个构造函数, ...
- .net控件Radiobuttonlist的简单应用
1.radiobuttonlist 通过RepeatDirection属性控制改控件的显示方向是纵向还是横向. 2.radiobuttonlist有一个重要的时间叫OnSelectedIndexCha ...
- React 实践项目 (三)
React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux进行 ...
- 腾讯云centos7服务器环境搭建,tomcat+jdk+mysql+nginx
软件:jdk 1.8.0_45 tomcat 8.5.8 mysql 5.6.36 nginx 1.10.x或以上 其中tomcat在centos6.8中没问题,centos7中会出现卡在启动那里 I ...
- 如何快速轻松学习bootstrap
我以前也是通过看一些视频教程来学的,比如慕课网上的,比如51cto上的那些零基础入门bootstrap什么的,还有一些培训班里流传出来的,感觉晕乎乎的,不知所云. 还是在后面不断使用的过程中慢慢体会到 ...
- solr6.3 + Hbase Indexer使用MR创建索引,错误Bad return type
使用solr6.3 + Hbase Indexer ,通过Hbase-indexer从Hbase建立索引到solr中,进行全文搜索. 两种实现方式:① 开启hbase-indexer进行实时同步新数据 ...
- DAX/PowerBI系列 - 关于时间系列 - 如何用脚本生成时间维度 (Generate Date Dimension)
跟大家的交流是我的动力. :) DAX/PowerBI系列 - 关于时间系列 - 如何用脚本生成时间维度 (Generate Date Dimension) 难度: ★☆☆☆☆(1星) 适用范围: ★ ...
- background:rgba() 兼容ie8 用法
background: rgba(255,255,255,.1);//火狐,谷歌等 filter:progid:DXImageTransform.Microsoft.gradient(startCol ...