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. 【转】HTTP响应报文与工作原理详解

    超文本传输协议(Hypertext Transfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一个请求;服务器接到 ...

  2. 14个华丽的javascript图表资源和插件

    最近我分享一许多css/jquery 有用的资源,这里我将介绍一些用于构建华丽图表的javascript资源和插件,图表是展示数据最有效的方式. 建立一张图表有很多不同的方法,比如falsh.java ...

  3. 结合实际项目分析pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. mongodb学习(二)分级查询数组中的值

    (PS: 标题有点不妥当...) 大概是这样...数据结构如下: 需要模糊查询title的值... mongodb中操作语句: 主要是注意这里urlElements不需要加[0]...我开始的时候写成 ...

  5. sqlserver修改增删改字段

    ---新增列 alter table article add addtime0 datetime ---修改列 alter table article ) --删除列 alter table arti ...

  6. 使用SSH搭建用户注册登录系统

    [转]http://blog.sina.com.cn/s/blog_a6a6b3cd01017c57.html 什么是SSH? SSH对应 struts spring hibernatestruts ...

  7. onethink的熟悉

    2014.07.14 下载后,并安装成功! 发现一个安装的问题.安装时,无法直接成功. 修改Url 直接跳到最后一步,实现了安装.去官网查询,发现是程序的问题. 尝试构建企业官网. 首先 实现一个企业 ...

  8. dom对象中的this和event.target区别

    1.this是事件冒泡,动态变化.先触发内部事件,由内到外的执行. <script> function testdiv(val){ console.log(val.id); } funct ...

  9. UVa 11631 - Dark roads

    题目大意:政府为了减小开支决定关闭一些路灯,同时保证照亮的路能连接所有路口. 又是一个MST问题,Kruskal算法,不过数据规模比较大,又Submission Error了...扔这吧... #in ...

  10. Grunt构建工具插件篇——之less工具2

    Grunt任务分为两部分,一部分是任务,即Grunt要执行的代码,找到对应功能的插件就成.所以等会要下载grunt-contrib- less包,这个插件便是把less文件编译成能直接使用的css.另 ...