第一种方法其实是最合适的，也是对开发人员要求最高的，即使有思路与算法在开发过程中也会踩很多坑，比如1图片预加载，2querySelector取元素居然获取不到，3使用boxsizing简化计算过程降低复杂性，等等 box。

* Safari and Chrome *columnrule3px outset #ff0000实例lt！DOCTYPE html CSS3瀑布流 *大层* containerwidth80%margin 0 auto *瀑布流层* waterfall mozcolumncount4 * Firef。

同时，通过设置 justifycontent 属性为 spacebetween，使子元素之间在容器内均匀分布在子元素item中，通过设置 flex 属性和宽度等样式，可以实现不同宽度的子元素在容器内自适应布局需要注意的是，前端瀑布流布局的。

瀑布流布局实现的方法很多，具体可以自行百度，此处不再赘述本文中瀑布流实现方法为四列布局li*4，每个图片为一个盒子pimg+p，从后台读取数据后赋值给盒子中的元素，判定此时高度最小的列li，然后将盒子。

但是今天我们的瀑布流可不是一般的瀑布流让我们接着看自动排版我们的要求是做那种随机凌乱的感觉，所以我们需要做一种机制，来将图片选择最优的一种排列方式来展示到页面上，也就是保证图片与相邻图片的比例是最合适的然后。

瀑布流布局思路 首先确定列数，每次将新增的DOM结构添加到当前高度最矮的一列，以此类推，形成一种参差不齐的差异化布局形式滚动偏移场景1 当元素内容超出元素大小，并且元素设置了overflow，可以使元素出现滚动条，通过。

WaterLayout 实现瀑布流的使用的关键类是 UICollectionViewFlowLayout，如果我们不继承直接使用的话，系统已经帮我们实现了一些效果，比如横向或者竖向滑动，然后配置一些属性或者遵循UICollectionViewDelegateFlowLayout，来显示个性化的效。

isFitWidth 自适应浏览器宽度Boolean isResizableL 是否可调整大小 Boolean isRTL 使用从右到左的布局 Boolean 2jqueryinfinitescroll，有了瀑布流布局，我们还需要一个动态加载的功能，也就是浏览器滚动条滚动到底。

那么接下来就基于这个特点开始瀑布流探索之旅基础功能实现首先我们定义好一个有 20 张图片的容器， #waterfall position relative waterfallbox float left width 200px。

首先，css3的布局主要用到下面三个属性 columncount columngap columnrule 其次，在兼容column的浏览器中可以实现瀑布流，代码如下 demo width 500px height auto webkitcolumncount3 mozco。

今天抽空再写一篇，写个瀑布流的效果做过iOS的都知道瀑布流在iOS中也是个很流行的布局方式，这里就不再多介绍了我们来看看如何用JS来实现瀑布流的效果我就直接上代码了，里面的注释都很清晰不懂的可以来问我htm。

这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置。

其实这种jquery的插件真的比较多，百度下就有很多结合两个jquery插件jquery瀑布流插件blocksit和图片延迟加载插件jquerylazyload可以实现向百度首页那种延迟加载的瀑布流样式而且代码也比较简单function quotimglazyquot。

可以实现，用扩展组件特殊功能容器瀑布流容器来做建议先在文档中心搜一下文档说明看看，或看课程iVX入门课程零基础快速掌握可视化全栈开发扩展组件介绍瀑布流容器和瀑布流卡片一节教程。

Weex是一个可以利用web 前端开发技术来实现Androidios 原生引用的框架，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API1组件是提供瀑布流布局的核心组件瀑布流，又称瀑布流式布局是比较。