微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

瀑布流的实现方式原生js+jquery+css3

分类：jQuery作者：编程之家

前言

项目需求要弄个瀑布流的页面，用的是waterfall这个插件，感觉还是可以的，项目赶就没自己的动手写。最近闲来没事，就自己写个。大致思路理清楚，还是挺好实现的...

原生javascript版

rush:xhtml;"> <Meta charset="UTF-8"> 瀑布流-javascript
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">

jquery版本

rush:xhtml;"> <Meta charset="UTF-8"> 瀑布流-jquery
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">

大致思路 1.先让第一行的浮动 2.计算第一行的每个块的高度 3.遍历第一行之后的每一个块，逐个放在最小高度的下面 4.加载数据插入最后，再重新计算 注意点

a.原生js

1.定义了getClassObj()函数用于获取class类的对象，方便调用。考虑了兼容性 getElementsByClassName 2.定义了getminHIndex()函数用户获取最小值的索引 3.设置块与块之间的距离最好用padding，这样的话offsetHeight可以直接获取得到高度。如果设置margin则得多加个外边距的距离 4.代码中设置了定时器加载数据，其实可以省略，只要保证第一次加载的数据能满屏就可以。如果没出现滚动条的话onscroll事件是不会执行到的。也就没办法加载数据了 5.代码中的计算宽度也可以修改，设计的页面是定宽的瀑布流的话。这里主要是做了响应式的处理

rush:js;"> var arrBox=getClassObj(parentID,childClass);// getClassObj()获取子class的数组 var iBoxW=arrBox[0].offsetWidth;// 获取瀑布流块的宽度 var num=Math.floor(document.documentElement.clientWidth/iBoxW);//计算窗口能容纳几列 oParent.style.width=iBoxW*num+'px';//设置父级宽度

6.每设置一块位移，都要在列高的数组上增加数值，防止块重叠

rush:js;"> arrBox[i].style.position='absolute';//设置绝对位移 arrBox[i].style.top=minH+'px'; arrBox[i].style.left=minHIndex*iBoxW+'px';//也可以直接获取arrBox[minHIndex].offsetLeft arrBoxH[minHIndex]+=arrBox[i].offsetHeight;//添加后，更新最小列高

b.jquery

1.思路是跟js一样的，只是jquery封装了很多方法，让我们简便的就实现了 2.注意width(),跟innerWidth()的区别。前者只能获取宽度值（不包括补白padding）

css3版本

rush:xhtml;"> <Meta charset="UTF-8"> 瀑布流-css3
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">
Box">

注意点

1.滚动加载还是得另外加js 2.加载的数据，是竖向排列的。体验不是很友好 3.有兼容性问题，Internet Explorer 10 +

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

jqueryjs瀑布流

相关推荐

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(&quot;.list_r&quot;).find(&#39;span&#39;).css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 &#39;color&#39;: &quot;#838792&quot;
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: &lt;span id=&quot;time&quot;&gt;&lt;/span&gt; js: &lt;script src=&quot;Js/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;%--引用jQuery
jQuery 添加水印
jQuery 添加水印 &lt;script src=&quot;../../../../AJs/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; $(document).re
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&quot;&lt;script type=&#39;text/javascript&#39;&gt;alert(&quot;XXX&quot;);&lt;/script&gt;&quot;); 此方只能调用内部函数
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 &lt;%@ Page Language=&quot;C#&quot; Auto
.Net后台调用js，提示、打开新窗体、关闭当前窗体
.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write(&quot;&lt;script&gt;window.alert(&#39;支付成功!&#39;);window.open(&#39;/JkCommerce/&quot; + href + &quot;&#39;,&
.net 搜索联想词
思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。 前台 &lt;div class=&quot;sc_con&quot; id=&quot;bbsearch&quot;&gt; &lt;input type=&quot;text&quot; class=&
JS点击子元素不触发父元素点击事件(js阻止冒泡)
&lt;html&gt; &lt;title&gt;&lt;/title&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;style type=&quot;text/css&quot;&gt; .divone{width:100
jQuery表单验证提交：前台验证一
jQuery表单验证提交：前台验证一（图文+视频）
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot