<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>瀑布流</title>

    <link rel="stylesheet" type="text/css" href="pbl.css"/>

</head>

<body>

<div class="container">

    <div><img src="img/1.jpg"/></div>

    <div><img src="img/2.jpg"/></div>

    <div><img src="img/3.jpg"/></div>

    <div><img src="img/4.jpg"/></div>
　　　　　　.
　　　　　　.
　　　　　　.

</div>

</body>

</html>

css

*{

    padding: 0px;

    margin: 0px;

}

.container{

    width: 1000px;

    column-width: 100px;

    -webkit-columns-width: 100px;/* safari chrome */

    /* -ms- ie */

    /* -o opera */

    -moz-columns-width: 100px;/* firefox */

    column-gap: 5px;

    -webkit-column-gap: 5px;

    -ms-column-gap: 5px;

    -o-column-gap: 5px;

    -moz-column-gap: 5px;

    margin: 0px auto;

}

.container div{

    width: 100px;

    border: 1px #000000 solid;

    margin-top: 5px;

    text-align: center;

    word-wrap:break-word;

}

.container img{

    width: 100px;

    height: auto;

    display: block;

}

基于CSS多列实现瀑布流的更多相关文章

  1. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

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

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

  3. js-实现多列布局(瀑布流)

    本文是使用面向对象的思想实现多列布局(瀑布流).当然,使用面向过程也能实现,具体效果图和案例如下: 具体实现代码如下: <!DOCTYPE html> <html lang=&quo ...

  4. css3多列及瀑布流效果

    css3内容分块,多列效果(类似报纸版块排版): .div02{ /*count:内容分为几列,gap:内容与分割线的距离,rule:分割线样式*/ column-count:; column-gap ...

  5. 纯 css column 布局实现瀑布流效果

    原理 CSS property: columns.CSS属性 columns 用来设置元素的列宽和列数. 兼容性 chrome 50+ IE 10+ android browser 2.1+ with ...

  6. css浮动+应用（瀑布流效果的实现）

    首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表

    #fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; ...

  8. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. web前端学习笔记-瀑布流的算法分析与代码实现

    瀑布流效果目前应用很广泛,像花瓣,新浪轻博,蘑菇街,美丽说等好多网站都有.也有好多支持该效果的前段框架,今天学习了一下这种效果的实现,不依赖插件,自己动手分析实现过程,为了便于叙述清楚,分析中的一些名 ...

随机推荐

  1. mybatis由JDBC的演化过程分析

    我们知道,mybatis是对JDBC的封装,那么他是如何演变过来的呢? 摘自传智传媒Java培训资料 关于mybatis的演化原理,我们先看看我们最熟悉也是最基础的通过JDBC查询数据库数据,一般需要 ...

  2. 浩顺晶密K-5 打卡时间设置

    公司有一台浩顺晶密K-5打卡设备,因为时间异常需要重新调整,设备外部就几个按钮,全部按了一遍发现没有任何变化,所以肯定是哪里操作不对,然后用钥匙打开这个设置,上面有一排文字,分别是设置.+.-.确认等 ...

  3. 笨办法学Python（十八）

    习题 18: 命名.变量.代码.函数 标题包含的内容够多的吧?接下来我要教你“函数(function)”了!咚咚锵!说到函数,不一样的人会对它有不一样的理解和使用方法,不过我只会教你现在能用到的最简单 ...

  4. 类型构造器--高阶类型（构造器）：Kind (type theory)--类型的元

    元类型(0阶类型):nullary type, data types 一元类型(一阶类型):unary  adj. [数] 一元的   二元类型: is the kind of a binary ty ...

  5. 广搜最短路(最短时间到达目的地)，POJ(3669)

    题目链接:http://poj.org/problem?id=3669 解题报告: 1.流星坠落的点,四周和自己本身都被毁灭,不断更新每个点被毁灭的时候的最短时间. 2.搜索终点是,到达某个点,这个不 ...

  6. 剑指offer28 字符串的排列

    1.全局变量可以在最后去定义并初始化,不一定非要在开头 2.此题有一种特殊情况需要考虑,比如字符串是“aa”,那输出应该是“aa”,而不是“aa,aa”,即相同的不输出.实现这个处理用了c++中的容器 ...

  7. SWFUpload 参数详解

    属性   类型 默认值 描述 upload_url String 处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址 preserv ...

  8. Mybatis中的DataSource配置

    dataSource 的类型可以配置成其内置类型之一,如 UNPOOLED,POOLED,JNDI. 1.如果将类型设置成 UNPOOLED,MyBatis 会为每一个数据库操作创建一个新的连接,并关 ...

  9. getnumdevices.c && setgetdevicetype例程

    getnumdevices.c代码 /* 文件名: getnumdevices.c * 功能 : 测试函数acc_get_num_devices(.) */ #include<stdio.h&g ...

  10. centos开启rewrite功能

    首先找到 /etc/httpd/conf/httpd.conf 文件,然后修改以下两个地方: 1.取消下面一句的注释 LoadModule rewrite_module modules/mod_rew ...