jquery瀑布流插件,react瀑布流插件

jquery瀑布流插件,react瀑布流插件,js原生瀑布流插件制作

本文主要详细介绍js原生瀑布插件的制作。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。

本文分享js原生瀑布插件的具体代码,供大家参考。具体内容如下

先看效果。

和普通的瀑布流是一样的。调用时,传入容器、图片、图片宽度就可以直接生成瀑布流。

话不多说,看看代码,后面再谈思路。

和HTML呼叫,其中HTML只需要一行。

身体

div class='main'/div

script src='index.js'/script

脚本

//第一个参数,瀑布容器

var DOM=document . getelementsbyclassname(' main ')[0];

//第二个参数image link被写入数组

var imgArr=['img/0.jpg ',' img/45.jpg ',' img/225.jpg ',' img/3.png ',' img/7729.png ',' img/a.jpg ',' img/ama.jpg ',' img/c.png ',' img/0.jpg ',' img/3.png ',' img/45.jpg ',' img/225.jpg ',' img/7729.png ',' img/img

//调用插件,传入参数,第三个是图片宽度

瀑布流(dom,imgArr,220);

/脚本

/body

对应2的Css。超文本标记语言。main是传入容器,其中position:relative;这是必要的。

然后。主img {过渡:全0.5s}是一个动画代码,添加到容器中的所有图片中。主要{

边框:1px纯色# ccc

宽度:90%;

边距:0自动;

位置:相对;

}。主图像{

过渡:全0.5s

}

然后js

/**

* @param {*} dom代表瀑布容器。

* @ param { * } imgArr图像数组

* @param {*} wid图片宽度

*/

函数waterFallFlow(dom,imgArr,wid) {

var缺口;//间隙

var colNumber//列数

img DOM();

setImgPos();

//当窗口改变时

window.onresize=function(){

setImgPos();

}

/* * var timer=null;

*上面是这么说的,丝滑,但是太影响表演了。拖动窗口时

*非常非常频繁地调用该函数来重新排列图片。

*

*你可以这样做,防抖

*

* window.onresize=function(){

* if(定时器){

* clearIntval(定时器);

* }

* timer=setTimeout(function(){

* setImgPos();

* },300);

* }

*

*/

//生成DOM元素

函数imgDom() {

for(设I=0;i imgArr.lengthi ) {

const URL=im garr[I];

let img=document . createelement(' img ');

img.src=url

img . style . width=wid ' px ';

img . style . position=' absolute ';

//对所有图片使用绝对定位

img . style . left=“”;

img . style . top=“”;

img.onload=function(){

setImgPos();//异步加载图片

}

DOM . appendchild(img);

}

}

//设置每张图片的坐标

函数setImgPos() {

cal();

var colY=新数组(colNumber);//存储每列中下一个图片的Y坐标

coly . fill(0);//填充数组为0

for(设I=0;I DOM . children . length;i ) {

var imgM=DOM . children[I];

var y=Math.min(.colY);//找到最小值

var index=coly . index of(y);//什么栏目?

var x=(指数1) *缺口指数* wid

imgm . style . left=x ' px ';

imgm . style . top=y ' px ';

//更新数组

colY[index]=parse int(imgm . height)gap;

}

//查找数组中的最大数字,以解决父div折叠问题

var h=Math.max(.colY);

console . log(h);

DOM . style . height=h ' px ';

}

//计算相关数据

函数cal() {

var container width=parse int(DOM . client width);

colNumber=math . floor(container width/wid);//列数

var space=container width-colNumber * wid;

gap=space/(colNumber 1);//计算差距

}

}

基本上我都有写评论,看得懂。

来看思路

1.接受传入的参数、容器、图像数组和图像宽度。

2.创建一个图片元素并将其添加到相应的容器中

3.设置每张图片的宽度和高度,并计算列数和间距。

4.通过绝对定位排列图片,计算对应的左顶值,即对应的X和Y坐标。

前三步应该没有问题。让我们看看第四步

想法是这样的。

主要思路是找到最短的一列来安排下一张图片,现在最短的出现在第二列。

这时,图片被添加到之前最短的第二列。现在继续找最短的一栏,继续加图。

等等来完成瀑布流的排列看具体流程。

首先计算图片有多少列,创建一个列数长度的数组,全部用0填充,用来存放后面的Y坐标。

遍历容器中的子元素,在循环中找到当前数组中的最小值,最小值所在的位置(列数)就是Y坐标。

这时候就可以找到x坐标了。

X=(列数1)*当前列的间距*宽度(传入的参数)

所以有一个地方。

注意,每次需要更新数组时,都需要修改图片添加位置的Y坐标,异步加载图片。

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • react脚手架配置webpack,react框架怎么学
  • react脚手架配置webpack,react框架怎么学,React脚手架搭建的学习
  • react常用组件及作用,react 组件传递数据
  • react常用组件及作用,react 组件传递数据,React组件间通信的三种方法(简单易用)
  • jquery瀑布流插件,react瀑布流插件,js原生瀑布流插件制作
  • ,,浅析React 对state的理解
  • ,,react路由守卫的实现(路由拦截)
  • ,,react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析
  • ,,React Native 真机断点调试+跨域资源加载出错问题的解决方法
  • react两种组件,react组件中必不可少的一个函数
  • react和vue的未来趋势,vue框架和react框架的区别
  • react 装饰器的使用教程,react装饰器有什么用
  • reactor模式详解,什么是reactor模式
  • react优先级调度,React的底层调度策略的名称
  • react 网络请求用什么,react 请求数据
  • 留言与评论(共有 条评论)
       
    验证码: