瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动。这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格

 特点:每个图片的宽度相等,长度不同。随着窗口的宽度的改变页面上并排的数量也会改变。

第一种比较低级的js实现。

页面加载时:

window.onload=function(){

  flall();

}

页面重载的时候:

window.onresize=function(){

  flall();

}

实现函数:

function flall(){

//获取页面的元素

var elems = document.getElementById("box1").children;

 //设置每行的数量=parseInt(可视页面的宽度/图片的宽度)

var mun = parseInt(window.innerWidth/picWidth);

//设置水平距离=(窗口的宽度-图片的宽度)/(图片的数量+1)

var Lie_space=(window.innerWidth-num*picWidth)/num+1

//设置垂直距离(可以自定定义)

var vertical_space = 20;

//设置存放位置的数组

var arr=[];

//计算水平位置&垂直的位置放入数组

for(var i =0 ; i<num; i++){

  arr.push[{

  left: i * picWidth+i * Lie_space,

  top:vertiacl_space

}];

}

//设置图片的位置

for(var i =0; i< eles.lenght;i++){

  list[i].style.left=arr[i%num].left+"px";

  list[i].style.top= arr[i%num].top +"px";

  arr[i%num].top+=list[i].offsetHeight+vertiacl_spacel

}

}

 第二种:待续。。。。。

瀑布布局(waterflall flow)实现的更多相关文章

  1. ANDROID定义自己的观点——模仿瀑布布局(源代码)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 简单介绍: 在自己定义view的时候,事实上非常easy,仅仅须要知道3步骤: 1.測量- ...

  2. 玩转CSS3(二)---CSS3实现瀑布布局

    请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 觉得腾讯微博微频道里的那种布局方式很好,在这里利用CSS3简单的实现了一下. 先上一张效果图: 代码: pubu.css /* CSS Docu ...

  3. 【Android】14.0 UI开发(五)——列表控件RecyclerView的瀑布布局排列实现

    1.0 列表控件RecyclerView的瀑布布局排列实现,关键词StaggeredGridLayoutManager LinearLayoutManager 实现顺序布局 GridLayoutMan ...

  4. Collection View 自定义布局(custom flow layout)

    Collection view自定义布局 一般我们自定义布局都会新建一个类,继承自UICollectionViewFlowLayout,然后重写几个方法: prepareLayout():当准备开始布 ...

  5. Flutter 布局(九)- Flow、Table、Wrap详解

    本文主要介绍Flutter布局中的Flow.Table.Wrap控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Flow A widget that implements the ...

  6. 12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象

    1.Row布局 Row中的item可以不需要使用anchors布局,就能通过行的形式进行布局. 并且item可以使用Positioner附加属性来访问有关其在Row中的位置及其他信息. 示例如下所示, ...

  7. Android笔记——Android五大布局

    一.五大布局 Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是Li ...

  8. CSS布局总结

    三种布局模型: 1.flow 标准流布局 2.float 浮动布局 3.layer 层叠布局 关于(flow) 标准流布局 浏览器默认的布局方式就是标准流布局.对于标准流布局下的的块元素和行内元素的特 ...

  9. Bootstrap 响应式瀑布流 (使用wookmark)

    使用瀑布布局 官方 http://www.wookmark.com/jquery-plugin GitHub https://github.com/GBKS/Wookmark-jQuery  (下载后 ...

随机推荐

  1. ZAP笔记

    1.HTTP自动变成HTTS问题. 在使用OWASP ZAP 2.8.0的时候,如果设置了dynamic ssl certificates,并把正式导入到浏览器的时候 如果ZAP当做代理访问HTTP的 ...

  2. node压缩文件

  3. vue学习时遇到的问题(二)

    1. this.$nextTick veu中进行数据改变后,并不会马上刷新视图:用nextTick可告诉执行下个函数后马上刷新视图: this.$nextTick(function(){     // ...

  4. jquery animate()方法 语法

    jquery animate()方法 语法 作用:animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创 ...

  5. RestFul是啥

    1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...

  6. docker stack /swarm 替代 docker-compose 进行部署

    之前一直用docker-compose开发了几个单例的service, 今天开始压力测试, 结果发现postgres的CPU负载很重, 就想设置cpus 结果发现docker-compose V3之后 ...

  7. CDOJ 1133 菲波拉契数制 变直接统计为构造

    菲波拉契数制 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit St ...

  8. 洛谷p2375 kmp

    题意 给你一个字符串,让你求一个\(num\)数组,\(num[i]\)为长度为\(i\)的前缀的公共前后缀长度不超过\(\lfloor \frac{i}{2}\rfloor\)的个数, 例如&quo ...

  9. 消费端ACK和重回队列

    使用场景 消费端ACK和重回队列 消费端ACK使用场景: 1.消费端进行消费的时候,如果由于业务异常我们可以进行日志记录,然后进行补偿. 2.由于服务器宕机等严重问题,那我们就需要手工进行ACK保障消 ...

  10. HDU 5858 Hard problem ——(计算几何)

    其实这题最多是个小学奥数题- -,,看到别人博客各显神通,也有用微积分做的(我也试了一下,结果到最后不会积...). 思路如下(这两张图是网上找来的): 然后就很简单了,算三角形面积可以用海伦公式,也 ...