css3虽然可以实现,不过要是真的运用到项目中还是老老实实写js吧

.container{

  /*列的宽度*/

  column-width:160px;

  -webkit-column-width:160px;

  -moz-column-width:160px;

  /*列与列之间的间隙*/

column-gap:4px;

-webkit-column-gap:4px;

}

.container div{

  width:160px;

  margin:6px 0;

}

<div class="container">
  <div><img src="data:images/P1.jpg" /></div>
  <div><img src="data:images/P2.jpg" /></div>
  <div><img src="data:images/P3.jpg" /></div>

</div>

css3瀑布流的更多相关文章

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

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

  2. CSS3的学习--实现瀑布流

    基于CSS3实现瀑布流,使用CSS3的CSS 多栏(Multi-column). 可以到github上下载源码 : https://github.com/CraryPrimitiveMan/water ...

  3. 瀑布流的三种实现方式(原生js+jquery+css3)

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  4. css3多列及瀑布流效果

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

  5. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

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

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

  7. CSS3里的瀑布流效果

    页面伸缩之后,内部的布局会自动缩放,高度不同的内容也会自动以垂直瀑布的效果平铺. 下面就是一部分代码: CSS: /*大层*/ .container{width:%;margin: auto;} /* ...

  8. 炫酷的jquery瀑布流

    最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...

  9. masonry结合json 制作无限滚动的瀑布流

    做前端这行的 能直接贴代码就直接贴代码了,不用多说什么别的 效果需要引入jquery和jquery.masonry.min.js这两个JS JS代码如下: $(document).ready(func ...

随机推荐

  1. ios 字体设计

    ref: http://ju.outofmemory.cn/entry/217705 ref:http://gold.xitu.io/entry/57958a41128fe10056be13b1 下面 ...

  2. [noip2013]货车运输(kruskal + 树上倍增)

    描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物,司机们想知道每辆车在不超过车辆限重的情况下,最多能运多 ...

  3. IOS开发中如何判断程序第一次启动(根据判断结果决定是否显示新手操作引导)

    IOS开发中如何判断程序第一次启动 在软件下载安装完成后,第一次启动往往需要显示一个新手操作引导,来告诉用户怎么操作这个app,这就需要在程序一开始运行就判断程序是否第一次启动,如果是,则显示新手操作 ...

  4. webgl 网站demo

    网络上的一些经典的WebGL资源网站和WebGL开源引擎整理 http://www.babylonjs.com/ http://threejs.org/ http://www.finalmesh.co ...

  5. JS 工具 构建工具

    1.gruntjs http://www.gruntjs.net/ 2.bootstrap http://www.bootcss.com/ 3.

  6. QT第三天学习

    回顾: 布局: 绝对位置法: 手工布局:QLayout 可视化布局:设计器 VB MFC JAVA C# cocos QT信号和槽 ---------------------------------- ...

  7. js blob

    Blob 是什么? 这里说的是一种JavaScript的对象类型. Oracle 中也有类似的栏位类型. 在 [JS进阶] HTML5 之文件操作(file) 这一篇中用到了File对象,而实际上 f ...

  8. ViewSwitcher的功能与用法

    ViewSwtcher代表了视图切换组件,它本身继承了FrameLayout,因此可以将多个View层叠在一起,每次只显示一个组件.当程序控制从一个View切换到另一个View时,ViewSwitch ...

  9. 递归求和1到n

    一般的方法 #include<stdio.h> int sum(int n){ if(n==1) return 1; else return n+sum(n-1);} int main(v ...

  10. 如何去掉Atom的右键菜单?

    Win+R -- regedit -- Ctrl+F -- 搜索"Atom"(或者直接"Open with Atom") -- 找到有个值为Open with ...