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. python编程快速上手之第4章实践项目参考答案

    #!/usr/bin/env python3.5 # coding:utf-8 # 假定有一个列表,编写函数以一个列表值作为参数,返回一个字条串 # 该字符串包含所有表项,之间以逗号和空格分隔,并在最 ...

  2. 多线程下System.Security.Cryptography.Aes CreateDecryptor报“Safe handle has been closed”的解决方案

    因为系统需要对一些核心数据进行预加载以保证查询速度. 所以在application_start 事件中启用了后台线程对相关的数据进行加载并解密(为了保证解密的效率,将AES对像做了静态对像来保存:pr ...

  3. HTML5 服务器推送事件（Server-sent Events）

    服务器推送事件(Server-sent Events)WebSocket 协议的一种服务器向客户端发送事件&数据的单向通讯.目前所有主流浏览器均支持服务器发送事件,当然除了 Internet ...

  4. java constructor 在构造子类时，一定会调用到父类的构造方法 “ 私有属性被继承了？”问题

    ” Error:Implicit super constructor Pet() is undefined. Must explicitly invoke another constructor “ ...

  5. JavaScript创建对象的方法

    显示在浏览器中的控制台中. <script type="text/javascript"> //这个工厂方法返回一个新的"范围对象" functio ...

  6. 对sppnet网络的理解

    前言: 接着上一篇文章提到的RCNN网络物体检测,这个网络成功的引入了CNN卷积网络来进行特征提取,但是存在一个问题,就是对需要进行特征提取图片大小有严格的限制.当时面对这种问题,rg大神采用的是对分 ...

  7. windows下安装DB2数据库以及使用Aqua Data Studio链接数据库

    本文只是作为自己的心得体会,不具有一般性! 1.其实安装DB2数据库还是比较简单的,一般都是直接下一步下一步就可以了,只是有些地方需要注意.我安装的DB2数据库版本如下图所示: 2.拿到数据库的版本之 ...

  8. Hadoop集群的hbase介绍、搭建、环境、安装

    1.hbase的介绍(自行百度hbase,比我总结的全面具体) HBase – Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC ...

  9. Hadoop hdfs上传文件 权限问题

    问题描述: hadoop在虚拟机中的linux系统下 在本地通过eclipse编写代码把本地文件上传至hadoop平台的指定目录 代码如下: @Test public void upload() th ...

  10. 使用travis-ci自动部署github上的项目

    travis-ci是什么? 一个使用yaml格式配置用于持续集成完成自动化测试部署的开源项目 官网:https://travis-ci.org/ 使用travis-ci集成vue.js项目 首先,您需 ...