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. Java 9 揭秘（10. 模块API）

    Tips 做一个终身学习的人. 在本章节中,主要介绍以下内容: 什么是模块 API 如何在程序中表示模块和模块描述 如何读取程序中的模块描述 如何表示模块的版本 如何使用Module和ModuleDe ...

  2. .NetCore~Json代替了Xml

    回到目录 在进行.netCore时代后,最大的变化就是对Json的使用更加主动,基本代替了之前的XML,像一些用户配置,系统配置,包包配置等都是基于json的,而web.config这个文件基本变成一 ...

  3. 自定义七天签到View

    github传送车走你 https://github.com/guanhaoran/signin 因为这个View 是我很早之前写的,这些注释也是我今天刚想往github上传的时候 临时加的  有的注 ...

  4. 使用mysqldump备份数据库

    #! /bin/shday_str=`date +%j`day=`date +%Y%m%d`days_str=`echo "$day_str % 60"|bc`cd /home/d ...

  5. win10 运行sqlplus报错“SP2-1503: 无法初始化 Oracle 调用界面”

    解决方法: 1.临时方案:此时可以以“管理员身份”运行cmd,然后再执行sqlplus就行了. 长久方案: 请看原文:http://blog.csdn.net/bisal/article/detail ...

  6. Linux 显示文本指定行内容

    主要采用sed.head和tail命令 如果文本中使用了 \n 这类符号,cat命令会把它当成换行符,结果会出错 $ sed -n "10p" move.sh   # 显示第10行 ...

  7. xdu_1048:二分匹配模板测试

    二分匹配的模板题,这里用网络流模板(见刘汝佳<算法竞赛入门经典·训练指南>P359 Dinic算法)做. 将男女生均看做网络上的节点,题中给出的每个"关系"看做一条起点 ...

  8. linux执行sh报错：$’\r’: 未找到命令的解决

    背景 执行.sh脚本时出现$'\r': 未找到命令, 原因 是因为命令直接从windows 复制过来导致的 解决 yum install dos2unix dos2unix **.sh 进行转换 再次 ...

  9. CloseHandle 函数--关闭一个句柄

    CloseHandle函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724211(v=vs.85).aspx 作用 ...

  10. Apache Kafka - 介绍

    原文地址地址: http://blogxinxiucan.sh1.newtouch.com/2017/07/12/Apache-Kafka-介绍/ Apache Kafka教程 之 Apache Ka ...