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).根据图片真实宽度和每列的宽度比,计算出图片需要显示的 ...
随机推荐
- 构建混合应用方式之 - Azure混合连接
前面介绍了通过WCF中继构建混合应用的方式,由于对WCF的依赖,使得其使用有一定的局限性,基本上只适用于本地服务是WCF的.NET应用.而混合连接则弥补了这一块的缺陷,除了支持原有WCF中继的功能之外 ...
- jQuery手风琴的制作！！
jQuery手风琴的制作 首先我们先来做一个简单的jQuery的效果图 效果图 如下: css代码 如下: <style type="text/css" media=&quo ...
- jsp 按钮颜色
jsp 按钮颜色 第一种方法 <input style= "color:#FF0000;background-color:#00FF00;" type="butto ...
- for(int a:i)在java 编程中的使用
这种有冒号的for循环叫做foreach循环,foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简化版本 ...
- 分享一个废弃已久的插件架构 (.Net)
框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...
- Java基础语法<九> 接口与内部类
1 接口 interface implement 接口的所有方法自动地属于public.因此,在接口中声明方法时,不必提供关键字public. 接口可以包含多个方法,接口中可以定义常量.接口中的 ...
- 快手 Android 工程师面经
看着我把简历投完之后弹出的"完成"字样,我就十分的激动了,我是一名应届毕业生,老老实实的那种,学过的知识我都一步一个脚印的复习的完了,Lintcode上该刷的题,也妥妥的完成了,但 ...
- zoj 3963 heap partion
https://vjudge.net/problem/ZOJ-3963 题意: 给出一个数列,可以用这个数列构造一种二叉树,这个二叉树满足数的下标 i <= j,并且 si <= sj,s ...
- bash脚本的特性01
1.bash特性之多命令执行 read -p "please enter a passwd for $name ,[passwd]: " password [ -z "$ ...
- C#开发模式——单例模式
一.单例模式简介 单例模式是为保证一个对象,在程序运行的任何时刻只有一个实例存在,我们把这种实现方式称之为“单例模式”. 二.单例模式的核心 单例类只有一个实例存在 单例类提供一个全局访问点 单例类通 ...