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多列及瀑布流效果的更多相关文章

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

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  2. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  3. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

  4. [Android Pro] RecyclerView实现瀑布流效果（二）

    referece to : http://blog.csdn.net/u010687392 在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutMa ...

  5. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  6. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  7. Android UI 之WaterFall瀑布流效果

        所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容.     语言描述比较抽象,具体效果看下面的截图:   ...

  8. RecyclerView实现瀑布流效果（二）

    在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutManager.GridLayoutManager.StaggeredGridLayoutMan ...

  9. web页面和小程序页面实现瀑布流效果

    小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1).加载图片,获取图片的宽高度: 2).根据页面需要显示几列计算每列的宽度: 3).根据图片真实宽度和每列的宽度比,计算出图片需要显示的 ...

随机推荐

  1. 修改ElementUI源码实践

    提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...

  2. C# Web.config配置

    使用 <!--M002 バッチを起動のPath配置--> <add key="BM0002_START_PATH" value="D:\BM0002\B ...

  3. 启动Tomcat提示：指定的服务未安装

    新下载的Tomcat7.0 解压缩完了运行tomcat7.exe屏幕一闪就没了 运行tomcat7w.exe弹出个筐 指定的服务并未以已安装的服务存在 Unable to open the Servi ...

  4. Android - Fragment （一）定义

    什么是Fragment,为什么要用Fragment? Fragment,直译为碎片.是Android UI的一种. Fragment加载灵活,替换方便.定制你的UI,在不同尺寸的屏幕上创建合适的UI, ...

  5. Log4Net（一）：快速入门

    概览 Log4Net是Apache Log4J框架在.NET平台上的实现,它是一个帮助开发者将日志信息以多种方式(数据库.控制台.文件等)输出的开源工具. 为什么要使用日志记录 提供应用程序运行时状态 ...

  6. [C++ Calculator 项目] 初试

    Calculator V1.0 注:这是一个C++计算器项目的初始部分. 大体功能简介: 能够输入一串数学表达式 逐字符扫描,提取数字和符号得到一组队列 逐行输出提取的符号与数字 实现代码如下: sc ...

  7. tomcat的常用配置方法

    1.tomcat配置某个站点的欢迎页面的方法 2.tomcat配置虚拟目录的方法 3.tomcat配置虚拟主机的方法

  8. Dinic算法（研究总结，网络流）

    Dinic算法(研究总结,网络流) 网络流是信息学竞赛中的常见类型,笔者刚学习了最大流Dinic算法,简单记录一下 网络流基本概念 什么是网络流 在一个有向图上选择一个源点,一个汇点,每一条边上都有一 ...

  9. webpack vue2.0项目脚手架生成的webpack文件

    var path = require('path') var utils = require('./utils') var config = require('../config') var vueL ...

  10. C# 接口基础学习

    什么是接口  接口,在表面上是由几个没有主体代码的方法.属性.索引器.事件,或者它们的组合的集合体,有唯一的名称,可以被类或结构或者其他接口所实现(或者也可以说继承).它在形式上可能是如下的样子: i ...