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).根据图片真实宽度和每列的宽度比,计算出图片需要显示的 ...
随机推荐
- usaco training 4.2.2 The Perfect Stall 最佳牛栏 题解
The Perfect Stall题解 Hal Burch Farmer John completed his new barn just last week, complete with all t ...
- 搭建ES6运行环境
当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内, ...
- 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢，在Bootstrap模态框内部多次点击才能触发的问题
WebUploader百度前端团队开源的上传组件,用起来感觉真心不错的,标题的两个问题是我实际使用过程中遇到的问题,经过百度和谷歌查到解决方案, 特分享一下,以供遇到此问题的童靴. 谷歌浏览器弹出框打 ...
- Bootstrap按钮插件
前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...
- 使用C#创建简单的WCF服务
一.开发环境 操作系统:Windows 10 开发环境:VS2015 编程语言:C# IIS版本:10.0.0.0 二.添加WCF服务.Internet Information Services(II ...
- Python: Pandas运算的效率探讨以及如何选择高效的运算方式
本文就Pandas的运行效率作一个对比的测试,来探讨用哪些方式,会使得运行效率较好. 测试环境如下: windows 7, 64位 python 3.5 pandas 0.19.2 numpy 1.1 ...
- css 2D转换 transform-rotate 画插图
学习了一点2D转换,关于Transfrom-rotate的小用法 rotate()方法,在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. 下面看实例 第一个例子是没有使用rotat ...
- nodejs-ORM 操作数据库中间件waterline的使用
waterline和Sails.js同一团队开发,支持几乎所有的主流数据库,是nodejs下一款非常强大的orm,可以显著提升开发效率 一.waterline支持的数据库 二.waterline的配置 ...
- 关于华为P9手机的解锁、刷Recovery、获取Root、安装Busybox，以及升级降级的全过程（和一些错误的解决方法）
我有一部华为P9手机,型号EVA-TL00,属于移动定制机.用了半年多了,想给手机添加一些功能,发现有些功能必须Root之后才能用代码实现,所以动了Root的打算. 一.手机解锁.(不解锁则无法对手机 ...
- PL/SQL学习笔记_01_基础
PL/SQL语句可以在Oracle客户端的 SQL窗口或者 command 窗口中运行 在SQL窗口中运行步骤同 SQL语句 在command 窗口中运行的步骤如下: 1)File—new com ...