<!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. Swift自适应布局（Adaptive Layout）教程（一）

    通用的stroyboard文件是通向自适应布局光明大道的第一步.在一个storyboard文件中适配iPad和iPhone的布局在iOS8中已不再是梦想.我们不必再为不同尺寸的Apple移动设备创建不 ...

  2. Chromium源码系列一：Chromium简介及源代码获取和编译

    Chromium源码系列一:Chromium简介及源代码获取和编译 Chromium简介 ​ Chromium是一个由Google主导开发的网页浏览器,以BSD许可证等多重自由版权发行并开放源代码.C ...

  3. jstl Maven 依赖导致的 Jar 包冲突

    概述 Jar 包冲突是日常开发过程中,时常会遇到的问题.本文介绍由 jstl 的 Maven 依赖导致的 Jar 包冲突问题,以及对应的解决方法. jstl 的 Maven 依赖配置 <depe ...

  4. Linux目录配置——Linux目录配置标准：FHS

    事实上,FHS针对目录树架构仅定义出三层目录下应该放置哪些数据,分别是下面三个目录: 一./(根目录):与开机系统有关 根目录(/)所在分区应该越小越好,且应用程序所安装的软件最好不要与根目录放在同一 ...

  5. 关于硬盘分区使用exFat格式的优势及劣势（含摘抄）

    优势 可以设置最大32M的簇: 不记录日志. 劣势 无法使用windows的“文件共享”: 通过近期某个文件数量密级任务的测试发现,在大量文件的处理性能上,NTFS比exFAT文件系统的性能高出不少. ...

  6. GL格式一览表

  7. 硬件-ESP32S模块资料

    1.产品概述 ESP-32S WiFi 模块是由安信可科技自主设计研发,该模块核心处理器 ESP32提供了一套完整的802.11 b/g/n/e/i 无线局域网(WLAN)和蓝牙4.2解决方案,具有最 ...

  8. xshell 连接虚拟机过程

    (1)Ctrl+Shift+T 打开终端 terminal (2)ifconfig得到ip网络地址 (3)ssh安装已经打开ssh服务 (4)安装openssh-server sudo apt ins ...

  9. js另类值交换

    当我们有a.b两个值,想要交换,通常是要声明第三个变量,但是我最近看到这样一种不用声明第三个变量的处理方法: var a=1,b=2; a=[b,b=a][0]; 其实还是在内存中开出了一个新的空间( ...

  10. 3、SpringBoot+Mybatis整合------主键回填

    开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/SpringBoot_Mybatis01/tree/d68efe51774fc4d96e5c6870 ...