案例——瀑布流效果学习笔记及源码整理(浮动式瀑布流)

  • 时间:
  • 浏览:2

2017-04-18  09:43:55

js代码:

不传图第三次遍历,这时,第俩个多、第俩个ul的深层会变成21,最后那个ul深层是0;

之前 开始了了英语 上手写就会有千奇百怪的大问题出現。首先逻辑错误的就算了,改正或想通了就好。浏览器的避免大问题就烦了:

可以 看出,第一行俩个多0表示第一遍遍历俩个多ul均为空,就将第一张图片插入第俩个多ul中,

经过测试也很明显可以 看出,

火狐:    谷歌:

怪怪的说明:参数中url和num是暂且要的,我是为了想,万一图片的路径和我应该 显示的数量不同就还得再次深入封装。原本,一劳永逸吧。

火狐是按照咱们设想的那样,谁短去谁那里,因此谷歌却说我任性的0,1,2的来。(如图,是图片依次插入时,ul的索引值)

第四遍遍历时,俩个多ul都会 了图片且深层不一致,守护任务管理器就按照大伙原本的设定,俩个多都计算出来并比较,得到最短的穿进去,最后有了大伙看过的效果。

1:瀑布流的特点

(1)深层相同,深层不相同。可能性 深层相同深层不相同(2)可以 总爱 下拉加载(无止境)2:瀑布流有一种常见的形式(1)浮动式 - 即外层容器浮动布局(简单)

下图是我理解了你是什么个多属性的原理后自己画的效果图+注释。

下图是火狐遍历俩个多ul重复19次后得到的遍历规律和每次计算得出ul的offsetHeight的值的帕累托图,

实验证明:

不传图第五次遍历,第俩个多深层为21+21=42px;第二俩个多依旧21px;

你是什么结论在最后的代码中,经过测试是合拍的。

而另外俩个多ul依旧为0,这时将第二张图片插入第俩个ul中。

author:7060 4176@qq.com

time:2017-04-13

description:瀑布流学习与制作

按此规律重复下去,每当俩个多ul深层一致时,俩个多ul深层依次加在21;

控制台输出的结果如下图:

 有一种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异http://blog.csdn.net/tammy_zhu/article/details/74060 73

2017-04-17  10:43:19

2017-04-24  11:00:19

当然,clientHeight表示的是可视区域的深层,也却说我浏览器内容区域的深层,

当然是在可见的请况下,不到visibility: hidden;也是可以 被计算的,却说我都会 display:none;你是什么请况下,他还是在文档流中的。

不到人会在早高峰的地铁站,站最长的那一队上边吧。这却说我赋予机器人类的中国智慧啊。自学择优、择木而栖】

压缩版js

function pbl(oJson) {

    //传入参数,获取必要数据以备使用。    var oDiv = document.getElementById(oJson.Box);    var oUl = oDiv.getElementsByTagName(oJson.Ul);    var nNum = oJson.num;    var sUrl = oJson.Url;    //在滚动事先先加载一次,避免空白页面。    createImg();    //滚动持续加载,onscroll来触发页面的滚动事件    window.onscroll = function() {        //准备参数        var sT = document.documentElement.scrollTop || document.body.scrollTop;        var vH = document.documentElement.clientHeight;        var bH = document.body.scrollHeight * 0.9;        /*         * sT:滚动条滚动的深层         * vH:浏览器窗口的深层         * bH:总的内容深层,所有文本组起来撑开body的总深层.乘以0.9表示获得深层的90%的值         * sT + vH == bH 就表示,滚动条可能性滚到底部了。大于就表示滚超过了,         * 大于90%,想让滚动条还没到底的事先就加载,让效果更流畅。        */        //做判断,监听滚轮的位置,        if(sT + vH > bH) {            createImg();            //当其将要打过html深层的90%时,再次加载插入img的函数。        }    };    //下边:ulIndex函数,判断ul的深层谁最短,因此返回索引值    /*     * 传参,传进来事先准备好的十几次 ul集合。     * 思考:这里不传参就不到用准备好的ul集合?     * 涉及函数的作用域:http://www.jb51.net/article/460 68.htm     * 函数内的变量无法在函数外面访问,在函数内却可以 访问函数外的变量。什么都有这里不需要传参     * js作用域链的变量访问规则是:可能性当前作用域内存在要访问的变量,则使用当前作用域的变量,因此到上一层作用域内寻找,直到全局作用域,可能性没了,则该变量为未声明。     */    function ulIndex(oUl) {        var oldHeight = 60 0000000;        //设定俩个多很大很大的深层值,让页面在一之前 开始了了英语 加载的事先,作比较用,目的上让随便俩个多ul都小于他,原本上边的if就会成立        var index = 0        //初始化index值        for(var i = 0; i < oUl.length; i++) {            //在现有的十几次 ul集合中遍历,循环。            var nowHeight = oUl[i].offsetHeight;            alert(nowHeight)            if(nowHeight <= oldHeight) {                //通过赋值,来达到比较十几次 集合的目的                oldHeight = nowHeight;                //获取到你是什么ul的下标赋给index                index = i;            }        }        return index;        //返回你是什么ul的索引值    };        //createImg函数:俩个多删剪版本的创建    function createImg() {        var src = null;        //小于等于19一段话,一次性就会加载19张        for(var a = 1; a <= nNum; a++) {            //创建li和img底部形态,并将图片序号设为动态            src = "<li><img "+ sUrl + a + ".jpg' alt=''/></li>"            //这里再次取得传过来的符合条件的ul下标,            /*             * 你是什么避免法子很巧妙。可能性ul的循环次数和图片的插入不同,应该是俩个多步骤。             * 而通过回调函数传参的法子把ul遍历计算出来的符合条件的下标传进你是什么函数中,             * 利用了原本函数return和你是什么函数调用获得结果你是什么思想。很巧妙地化解了碰撞的大问题。             */            var index = ulIndex(oUl);            //最后把当前的图片加入到符合条件的ul中。            oUl[index].innerHTML += src;        }    };}

HTML:

利用上边window.onscroll事件函数中的代码为了测试,代码稍有更改,经过一番测试来证明注释图中的结论:

此篇详解浮动式

       原理:       1.外层容器左浮动       2.判断哪俩个多容器为最小容器(当垂直瀑布时,最短的为最小的。当水平排列接龙时,深层最窄的为最小的)       3.将图片(内容)插入到最小容器内。       判断,当滚动条滚动到一定程度,循环执行2和3

物体的clientHeight:可视区域的长度值:却说我所有内容叠加在同时的深层,在不到滚动条的请况下,且不到padding和border却说我到box-sizing的设置请况下,和深层一样。

因此经过我对offset偏移值进行怪怪的测试的页面中,谷歌和火狐弹出的偏移值和客户区大小的值在各种请况下都会 一样的。

当加了box-sizing你是什么概念后,就会不包括padding的深层。不到纯净的深层值。(之什么都有严格来说,加了box-sizing后,他的深层就带有padding了,什么都有说,和原本的深层值是一样的。看上去就像不包括paddng一样,之什么都有padding在深层中,而深层值已变成原本的深层减去上下padding了。)

什么都有不一样也正常,因此不需要差越多一般。

大问题的关键在于不传图和offset的计算上,既然不传图,21px的值又来自何方?

不传图第四次遍历,这时,俩个多深层均为21px;

再看火狐,他是先遍历俩个多ul并分别弹一次ul的深层,最后在你是什么个多ul中计算出最短的,传一张图,因此重复上述遍历步骤,并依次传规定张数。

【之什么都有原理你是什么点,说白了却说我可以 想象成三队人在排队等地铁,上边来的人肯定是自动往队伍最短的那一列的最后接着排,

if(sT + vH == bHq) {

            console.log(sT + vH);

            console.log(bHq)

            createImg();

 }

因此,最后的最后,遍历完毕,一次性传入设定的n张图片/内容。

反正我一之前 开始了了英语 是晕了~搞不懂这scrollTop、clientHeight、scrollHeight~~~

 拓展

遍历数值和规律如下图:

以上划线结论却说我在我不明不白请况下做的很不全面的测试时,所写的某有一种特定请况下的大问题描述,有待再次求证。

昨天研究然后,之什么都有理论上知道了各种top的区别,因此还是晕晕乎乎我却说我知道用到哪里。结果下班路上一听视频就删剪都明白了。要不说看书背理论没用呢!还是得实战,自己的认识才是最深刻的。

来源:腾讯课堂笔记https://ke.qq.com/webcourse/index.html#course_id=57390&term_id=60 106654&taid=260 199024918574&vid=e160 l36kd7

这要在同一台电脑屏幕深层的基础上减去每个浏览器标签栏和地址栏的深层,而每个浏览器的标签栏和地址栏的深层又不一样。。。

通过下面这段代码的 alert 测试。

当然,不管省么请况下,border的宽高的都会 和padding避免法子差越多。只不过在不到box-sizing的事先,只计算内容和padding的和,不计算border的。除非box-sizing是border-box她才计算border。

火狐和谷歌遍历出来的顺序不一样啊。我守护任务管理器上的思路是,图片按照哪个ul深层短往哪个ul中流动的顺序来,因此俩个多浏览器却说我有一种效果

我发现:谷歌是遍历俩个多ul,不传图,直接再次弹出第俩个多ul的深层,因此第俩个、第俩个多、直到三次都弹出来,

pblOfFloat-jq.min.js

var sT = document.documentElement.scrollTop || document.body.scrollTop;

var vH = document.documentElement.clientHeight;

var bHq = document.body.scrollHeight;

关于这群top的删剪解说在博客园原本博主那里非常删剪,传送带:http://www.cnblogs.com/yuteng/articles/1894578.html

第三遍遍历时,第俩个ul可能性有了图片,深层也却说我392和415,而第俩个多不到图,什么都有第俩个多依旧为0;这时第三张图片被放上去第俩个多ul中。

大问题很明显。

 很明显,从第四张图片之前 开始了了英语 ,谷歌就随心所欲了。

不包括margin因此包括padding(在不到box-sizing的请况下)

不传图第二次遍历,你是什么的事先,第俩个多ul的深层会变成21,后俩个多是0;

判断得知,documentElement.scrollTop || document.body.scrollTop + documentElement.clientheight === body.scrollHeight的值

 说了不到多废话,还是上最终代码吧,我封装好的js库,可以 实现多次调用了。

火狐和谷歌对于ul的offsetHeight的计算数值是不一样的,火狐是2755px,谷歌是147px

另body.clientHeight在谷歌和火狐中也是不一样的解释,谷歌972,火狐947、

经过我然后的学习,真正搞明白三者的关系和个人所有所有的具体含义和作用,总结在此篇文章:http://www.cnblogs.com/padding1015/p/6737363.html

 JQ避免版

html代码

 

(2)定位式 - 不到单独的浮动容器,却说我按照外层容器进行一一定位(复杂点)

因此,第二次遍历,第俩个多ul的深层却说我392——第一张图的深层。

top和left是从margin深层內部之前 开始了了英语 计算的

不到大问题来了,怎么么会判断谁最短?守护任务管理器又不长眼睛不需要看出来,不到经过数字化的计算和判断:

            代码要点:                1.创建元素 document.createElement(“元素”);                2.获得屏幕的宽和高,可能性不做横向的瀑布流,获得高就行了。                        document.documentElement.clientHeight;(浏览器显示出来的深层)                3.触发滚动条事件 window.onscroll                4.获得滚动条向下滚动的深层、距离                        document.documentElement.scrollTop ||                        document.body.scrollTop,(||是为了避免兼容大问题做的“或”双选一);                5.滚动后body深层,整个内容区域的深层                        document.body.scrollHeight

代码解析:

这却说我由于 大伙最后传入图片顺序不一致的最终由于 吧。看老师的演示效果,在谷歌中也是同样的大问题。

因此和scrolltop不到那些区别

而几张图片的顺序是原本的: