瀑布流的实现

小鱼儿 2022-06-02 05:57 255阅读 0赞

window.onload = function()\{

waterFall("warp");

\}

window.onresize = function()\{

waterFall("warp");

\}

function waterFall(element,space,children)\{

if(!element)\{

return;

\}

space = space || 10;

children = children || "div";

var warp = warp.getElementById(element);

war water = warp.getElementsByTagName(children); //子元素的宽度

var spaceWidth = water\[0\].offsetWidth;//大盒子的宽度

var colNum = Math.floor(warpWidth/spaceWidth);

var padding = Math.floor((warpwidth-colNum\*spaceWidth)/(colNum+1));

var column = new Array();

var maxHeight = 0;

for(var i=0;i<colNum;i++)\{

column\[i\] = new object();

column\[i\].top = space;

column\[i\].left = (spaceWidth \*i) + padding\*(i+1); //计算各列距离左侧的距离

\}

for(var i=0;i < water.length;i++)\{

//计算元素属于第几列

if((i+1)%colNum == 0)\{

sub = colNum;

\}else\{

sum = (i+1)%colNum;

\}

water\[i\].style.position = "absolute";

water\[i\].style.top = column\[sub-1\].top+"px";

water\[i\].style.left = column\[sub-1\].left+"px";

column\[sub-1\].top += water\[i\].offsetHeight + space;

\}

for(war i=0;i<colNum;i++)\{

if(column\[i\].top>maxHeight)\{

maxHeigth = column\[i\].top;

\}

\}

warp.style.height = maxHeight + "px";

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现瀑布流布局

<!DOCTYPE html> <html> <head> <style> .box {

妖狐艹你老母/ 2022年10月27日 12:19/ 0 赞/ 279 阅读

相关原生js实现瀑布流

[https://segmentfault.com/a/1190000012621936][https_segmentfault.com_a_1190000012621936]

ゝ一世哀愁。/ 2022年10月02日 12:47/ 0 赞/ 258 阅读

相关瀑布流的实现

window.onload = function()\{ waterFall("warp"); \} window.onresize = function()\{ wa

小鱼儿/ 2022年06月02日 05:57/ 0 赞/ 256 阅读

相关瀑布流布局JavaScript实现

html代码 <div id="content"> <!-- <div> <img src="img/1.jpg">

我就是我/ 2022年05月27日 12:30/ 0 赞/ 341 阅读

相关 JavaScript实现无限瀑布流

![70][] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

超、凢脫俗/ 2022年05月17日 11:14/ 0 赞/ 320 阅读

相关原生js实现瀑布流！

一、分析： 1、瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应； 2、使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获

矫情吗；*/ 2022年04月24日 15:40/ 0 赞/ 307 阅读

相关 js实现瀑布流布局

我个人不太喜欢这种布局、但需求还是有的、只能实现。查阅了资料找到两种方式：第一种： <!DOCTYPE html> <html> <head

骑猪看日落/ 2022年04月23日 11:04/ 0 赞/ 324 阅读

相关 js之瀑布流的实现

![1430556-20180814175608544-308304069.gif][] <!DOCTYPE html> <html lang="en">

冷不防/ 2021年09月29日 03:16/ 0 赞/ 293 阅读

相关 RecyclerView实现瀑布流效果

在上一节，我们已经简单说过StaggeredGridLayoutManager的使用，这一节给出个具体的例子，我们利用他做一个照片墙的功能，先看下效果 ![Center][]

骑猪看日落/ 2021年09月22日 05:02/ 0 赞/ 513 阅读

相关什么是瀑布流布局？瀑布流布局的实现方法

网页在进行布局的时候，有时会用到一种布局方式叫做瀑布流布局，那么，瀑布流布局是什么样的呢？本篇文章将来给大家介绍一下关于瀑布流布局的实现方法。首先我们来看一下瀑布流布...

小灰灰/ 2021年02月01日 17:15/ 0 赞/ 867 阅读