瀑布布局(waterflall flow)实现
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动。这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是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)实现的更多相关文章
- ANDROID定义自己的观点——模仿瀑布布局(源代码)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 简单介绍: 在自己定义view的时候,事实上非常easy,仅仅须要知道3步骤: 1.測量- ...
- 玩转CSS3(二)---CSS3实现瀑布布局
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 觉得腾讯微博微频道里的那种布局方式很好,在这里利用CSS3简单的实现了一下. 先上一张效果图: 代码: pubu.css /* CSS Docu ...
- 【Android】14.0 UI开发(五)——列表控件RecyclerView的瀑布布局排列实现
1.0 列表控件RecyclerView的瀑布布局排列实现,关键词StaggeredGridLayoutManager LinearLayoutManager 实现顺序布局 GridLayoutMan ...
- Collection View 自定义布局(custom flow layout)
Collection view自定义布局 一般我们自定义布局都会新建一个类,继承自UICollectionViewFlowLayout,然后重写几个方法: prepareLayout():当准备开始布 ...
- Flutter 布局(九)- Flow、Table、Wrap详解
本文主要介绍Flutter布局中的Flow.Table.Wrap控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Flow A widget that implements the ...
- 12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象
1.Row布局 Row中的item可以不需要使用anchors布局,就能通过行的形式进行布局. 并且item可以使用Positioner附加属性来访问有关其在Row中的位置及其他信息. 示例如下所示, ...
- Android笔记——Android五大布局
一.五大布局 Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是Li ...
- CSS布局总结
三种布局模型: 1.flow 标准流布局 2.float 浮动布局 3.layer 层叠布局 关于(flow) 标准流布局 浏览器默认的布局方式就是标准流布局.对于标准流布局下的的块元素和行内元素的特 ...
- Bootstrap 响应式瀑布流 (使用wookmark)
使用瀑布布局 官方 http://www.wookmark.com/jquery-plugin GitHub https://github.com/GBKS/Wookmark-jQuery (下载后 ...
随机推荐
- git 版本撤销,回退等
git checkout -- <file> #丢弃工作区的修改, 不要省略 -- ,这是只在工作区(work tree)修改了内容,还没有add 到暂存区,此时想撤销修改. ...
- The Semantics of Constructors(拷贝构造函数之编译背后的行为)
本文是 Inside The C++ Object Model's Chapter 2 的部分读书笔记. 有三种情况,需要拷贝构造函数: 1)object直接为另外一个object的初始值 2)ob ...
- npm安装cnpm时候报错code EINTEGRITY
npm安装cnpm时候报错code EINTEGRITY错误展示 PS C:\Users\by\Desktop\element_ui_demo> npm install --g npmnpm ...
- 2016 Multi-University Training Contest 4 部分题解
1001,官方题解是直接dp,首先dp[i]表示到i位置的种类数,它首先应该等于dp[i-1],(假设m是B串的长度)同时,如果(i-m+1)这个位置开始到i这个位置的这一串是和B串相同的,那么dp[ ...
- stingstream 类
使用完后在使用必须要clear():
- FastAdmin 在 CRUD 时出现 exec() has been disabled for security reasons 处理方法
然后在看看 禁用函数列表(php.ini)disable_functions = proc_open, popen, exec, system, shell_exec, passthru 这里要把 e ...
- react 路由
react 提供了实现路由的方式,不过需要我们下载插件 react-router-dom 当我们下载好了插件,然后我们可以通过 import {} from 'react-router-dom' 来引 ...
- ReentrantLock源码探究1:非公平锁的获取和释放
1.AQS简单介绍 Sync是ReentrantLock的一个内部类,它继承了AbstractQueuedSynchronizer,即AQS,在CountDownLatch.FutureTask. ...
- 微服务一键启动脚本shell带有环境变量的
etting####################################################### #程序代码数组APPS=(cAssistantbussiness cAssi ...
- 访问H2数据库的SpringBoot工程
JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...