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. web项目直接在浏览器上访问不需要带.jsp，直接ip地址加项目名 在web.xml里配置

    web.xml最上方 <welcome-file-list> <welcome-file> /view/login.jsp </welcome-file> < ...

  2. Linux下mysql远程连接问题

    [旧博客转移 - 发布于2015年9月6日 18:42]   在Linux上装好Mysql后 发现远程客户端连接不上 出现这种情况是因为mysql服务器出于安全考虑,默认只允许本地登录数据库服务器. ...

  3. 使用curl,libcurl访问Https

    编译curl,libcurl 下载curl源码(git clone https://github.com/curl/curl),在目录curl\winbuild\BUILD.WINDOWS.txt文件 ...

  4. Jenkins中的一些问题解决（~~不断更新~~）

    请使用ctrl+F,查询页面中你需要查找的错误信息(注意空格的输入) 1.错误"error fetching remote repo origin" 本地有多个sshkey,导致构 ...

  5. 修改User-Agent来伪装浏览器访问手机站点

    有时候为了测试需要,可能需要使用测试手机wap这样的站点,如果用真正的手机去测试也可以实现,但是比较麻烦,我们可以通过设置chrome的user agent来伪装浏览器,达到我们的测试目的. 代码如下 ...

  6. 配置LAMP实现WordPress

    环境说明: 在同一台主机上实现LAMP(Linux + Apache + MariaDB + PHP) CentOS 7.3.Apache 2.4.6.MariaDB 5.5.52.PHP 5.4.1 ...

  7. HTML基础知识（未完待续）

    一.HTML编辑工具:Sublime Text 二.HTML实体字符:1.( 空格):&nbsp: 2.(<) &lt: 3.(>)&gt: 4.(&)&a ...

  8. Swift 细节

    1.swift ?和 !的区别 1.1 Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值,也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化.如果在使 ...

  9. [Android FrameWork 6.0源码学习] View的重绘过程之Layout

    View绘制的三部曲,测量,布局,绘画现在我们分析布局部分测量部分在上篇文章中已经分析过了.不了解的可以去我的博客里找一下 View的布局和测量一样,都是从ViewRootImpl中发起,ViewRo ...

  10. HDU 6069

    Counting Divisors Problem Description In mathematics, the function d(n) denotes the number of diviso ...