看了一些网站的瀑布流加载，正好看到css3的多列属性，尝试着写了一个css做布局的瀑布流。

直接上代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS3多列属性瀑布流</title>
  6. <style>
  7. /*大层*/
  8. .container{width:80%;margin: 0 auto;}
  9. /*瀑布流层*/
  10. .waterfall{
  11. -moz-column-count:4; /* Firefox */
  12. -webkit-column-count:4; /* Safari 和 Chrome */
  13. column-count:4; /* 用整数值来定义列数。不允许负值 */
  14. -moz-column-gap: 1em;
  15. -webkit-column-gap: 1em;
  16. column-gap: 1em; /*用长度值来定义列与列之间的间隙。不允许负值*/
  17. }
  18. /*一个内容层*/
  19. .item{
  20. padding: 1em;
  21. margin: 0 0 1em 0;
  22. -moz-page-break-inside: avoid;
  23. -webkit-column-break-inside: avoid;
  24. break-inside: avoid;
  25. border: 1px solid #000;
  26. }
  27. .item img{
  28. width: 100%;
  29. margin-bottom:10px;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="container">
  35. <div class="waterfall">
  36. <div class="item">
  37. <img src="http://pic28.photophoto.cn/20130827/0005018340822440_b.jpg">
  38. <p>1 convallis timestamp</p>
  39. </div>
  40. <div class="item">
  41. <img src="http://pic48.nipic.com/file/20140912/7487939_223919315000_2.jpg">
  42. <p>2 convallis timestamp 2 Donec a fermentum nisi. </p>
  43. </div>
  44. <div class="item">
  45. <img src="http://pic.58pic.com/58pic/13/61/00/61a58PICtPr_1024.jpg">
  46. <p>3 Nullam eget lectus augue. Donec eu sem sit amet ligula
  47. faucibus suscipit. Suspendisse rutrum turpis quis nunc
  48. convallis quis aliquam mauris suscipit.</p>
  49. </div>
  50. <div class="item">
  51. <img src="http://pic.qiantucdn.com/58pic/22/06/55/57b2d98e109c6_1024.jpg">
  52. <p> 4 Donec a fermentum nisi. Integer dolor est, commodo ut
  53. sagittis vitae, egestas at augue. </p>
  54. </div>
  55. <div class="item">
  56. <img src="http://dynamic-image.yesky.com/740x-/uploadImages/2014/289/01/IGS09651F94M.jpg">
  57. <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  58. </div>
  59.  
  60. <div class="item">
  61. <img src="http://pic37.nipic.com/20140105/9996485_124205238150_2.jpg">
  62. <p>6 convallis timestamp</p>
  63. </div>
  64. <div class="item">
  65. <img src="http://sc.jb51.net/uploads/allimg/150623/14-150623111Z1308.jpg">
  66. <p>7 convallis timestamp 2 Donec a fermentum nisi. </p>
  67. </div>
  68. <div class="item">
  69. <img src="http://img0.imgtn.bdimg.com/it/u=848233399,609023395&fm=214&gp=0.jpg">
  70. <p>8 Nullam eget lectus augue. Donec eu sem sit amet ligula
  71. faucibus suscipit. Suspendisse rutrum turpis quis nunc
  72. convallis quis aliquam mauris suscipit.</p>
  73. </div>
  74. <div class="item">
  75. <img src="http://img3.imgtn.bdimg.com/it/u=3242709860,2221903223&fm=214&gp=0.jpg">
  76. <p> 9 Donec a fermentum nisi. Integer dolor est, commodo ut
  77. sagittis vitae, egestas at augue. </p>
  78. </div>
  79. <div class="item">
  80. <img src="http://pic.58pic.com/58pic/14/26/07/04R58PICFJm_1024.jpg">
  81. <p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  82. </div>
  83. <div class="item">
  84. <img src="http://img0.imgtn.bdimg.com/it/u=2478517127,62785200&fm=214&gp=0.jpg">
  85. <p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  86. </div>
  87. <div class="item">
  88. <img src="http://pic28.photophoto.cn/20130828/0005018351465470_b.jpg">
  89. <p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  90. </div>
  91. <div class="item">
  92. <img src="http://pic28.photophoto.cn/20130827/0005018340822440_b.jpg">
  93. <p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  94. </div>
  95. <div class="item">
  96. <img src="">
  97. <p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  98. </div>
  99. <div class="item">
  100. <img src="http://dynamic-image.yesky.com/740x-/uploadImages/2014/289/01/IGS09651F94M.jpg">
  101. <p> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  102. </div>
  103.  
  104. <div class="item">
  105. <img src="http://pic37.nipic.com/20140105/9996485_124205238150_2.jpg">
  106. <p>6 convallis timestamp</p>
  107. </div>
  108. <div class="item">
  109. <img src="http://sc.jb51.net/uploads/allimg/150623/14-150623111Z1308.jpg">
  110. <p>7 convallis timestamp 2 Donec a fermentum nisi. </p>
  111. </div>
  112. <div class="item">
  113. <img src="http://img0.imgtn.bdimg.com/it/u=848233399,609023395&fm=214&gp=0.jpg">
  114. <p>8 Nullam eget lectus augue. Donec eu sem sit amet ligula
  115. faucibus suscipit. Suspendisse rutrum turpis quis nunc
  116. convallis quis aliquam mauris suscipit.</p>
  117. </div>
  118. <div class="item">
  119. <img src="http://img3.imgtn.bdimg.com/it/u=3242709860,2221903223&fm=214&gp=0.jpg">
  120. <p> 9 Donec a fermentum nisi. Integer dolor est, commodo ut
  121. sagittis vitae, egestas at augue. </p>
  122. </div>
  123. <div class="item">
  124. <img src="http://pic.58pic.com/58pic/14/26/07/04R58PICFJm_1024.jpg">
  125. <p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  126. </div>
  127. <div class="item">
  128. <img src="http://img0.imgtn.bdimg.com/it/u=2478517127,62785200&fm=214&gp=0.jpg">
  129. <p> 10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
  130. </div>
  131. </div>
  132. </div>
  133. </body>
  134. </html>

具体实现样式是这样的（ps:）

css3多列布局瀑布流加载样式的更多相关文章

  1. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

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

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

  3. WAP用户评论简单实现瀑布流加载

    wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...

  4. js图片加载效果（延迟加载+瀑布流加载）

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  5. css3多列及瀑布流效果

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

  6. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  7. jQuery ajax瀑布流加载静态的列表页面

    1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...

  8. [JS] 瀑布流加载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

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

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

随机推荐

  1. [转帖]再谈IO的异步，同步，阻塞和非阻塞

    再谈IO的异步,同步,阻塞和非阻塞 https://yq.aliyun.com/articles/53674?spm=a2c4e.11155435.0.0.48bfe8efHUE8wg   krypt ...

  2. k8s ingres 的安装与使用

    1. 安装. 从ingress的官网下载yaml文件. https://raw.githubusercontent.com/kubernetes/ingress-nginx/master/deploy ...

  3. 《Mysql - Mysql 是如何保证主备一致的？》

    一:Mysql 主备的基本原理? - 主备切换流程(M-S 架构) -  - 在状态 1 中,客户端的读写都直接访问节点 A,而节点 B 是 A 的备库,只是将 A 的更新都同步过来,到本地执行. - ...

  4. oracle的jdbc的版本与jdk对应关系

    连接类型:1. JDBC OCI: oci是oracle call interface的缩写,此驱动类似于传统的ODBC 驱动.因为它需要Oracle Call Interface and Net8, ...

  5. Authorization

    授权,也叫访问控制,即在应用中控制谁访问哪些资源(如访问页面/编辑数据/页面操作等).在授权中需了解的几个关键对象:主体(Subject).资源(Resource).权限(Permission).角色 ...

  6. slot 组件的内部传值 v-slot 的使用

    嵌套组件传值 person.vue <template> <div class="vslot-test"> <ul> <li v-for= ...

  7. Math.random()的加密安全替换方法window.crypto.getRandomValues

    Math.random() 返回介于 0(包含) ~ 1(不包含) 之间的一个随机数. Math.random()函数不是加密安全的随机数生成器. window.crypto.getRandomVal ...

  8. Neo4J之标签类型

    Neo4J的标签可以理解一个类,在创建一个节点时可以设置一个或多个标签: 1. 标签名为中文(可以) CRATE(节点名:标签1:标签2{属性1:34} 创建了一个节点名为“节点名”的节点(不可以用节 ...

  9. 拦截器中获取不到controller注解问题

    刚刚在测试接口的时候发现一个奇怪的问题:通过拦截器获取 controller 类注解,有些能获取到,有些又不能获取到,见鬼了. [环境]: 1. springboot :2.2.0.RELEASE [ ...

  10. 测试人员必须掌握的linu常用命令

    有些公司需要测试人员部署程序包,通过工具xshell. 现在我将总结下工作需要用到的最多的命令 ls                                显示文件或目录 pwd       ...