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

  • 时间:
  • 浏览:0
  • 来源:uu快3诀窍_uu快3app安卓_导航网

我发现:谷歌是遍历几次 多ul,不传图,直接再次弹出第几次 多ul的深度,让你第几次、第几次 多、直到三次都弹出来,

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

var vH = document.documentElement.clientHeight;

var bHq = document.body.scrollHeight;

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

当然是在可见的情况下,找不到 visibility: hidden;也是需用被计算的,假若还会display:none;两种 情况下,他还是在文档流中的。

反正我一随后随后开始是晕了~搞不懂这scrollTop、clientHeight、scrollHeight~~~

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

当然,不管省么情况下,border的宽高的还会和padding补救法律最好的办法差太多。只不过在找不到 box-sizing的随后,只计算内容和padding的和,不计算border的。除非box-sizing是border-box她才计算border。

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

当加了box-sizing两种 概念后,就会不包括padding的深度。只有纯净的深度值。(其实严格来说,加了box-sizing后,他的深度就带有padding了,全都全都说,和原本的深度值是一样的。看上去就像不包括paddng一样,其实padding在深度中,而深度值已变成原本的深度减去上下padding了。)

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

代码解析:

火狐:    谷歌:

火狐和谷歌遍历出来的顺序不一样啊。我程序运行上的思路是,图片按照哪个ul深度短往哪个ul中流动的顺序来,让你几次 多浏览器全都全都 两种 效果

html代码

物体的clientHeight:可视区域的长度值:全都全都 所有内容叠打上去共同的深度,在找不到 滚动条的情况下,且找不到 padding和border也找不到 box-sizing的设置情况下,和深度一样。

找不到 现象来了,为什么我么我判断谁最短?程序运行又不长眼睛不不看出来,只有经过数字化的计算和判断:

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

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

pblOfFloat-jq.min.js

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

不包括margin让你包括padding(在找不到 box-sizing的情况下)

随后随后开始上手写就会有千奇百怪的现象总出 。首先逻辑错误的就算了,改正或想通了就好。浏览器的补救现象就烦了:

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

当然,clientHeight表示的是可视区域的深度,也全都全都 浏览器内容区域的深度,

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

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

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

第四遍遍历时,几次 多ul还会了图片且深度不一致,程序运行就按照亲戚亲戚朋友原本的设定,几次 多都计算出来并比较,得到最短的穿进去,最后有了亲戚亲戚朋友看多的效果。

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

经过测试也很明显需用看出,

 JQ补救版

1:瀑布流的特点

(1)深度相同,深度不相同。随后 深度相同深度不相同(2)需用一个劲下拉加载(无止境)2:瀑布流两种 常见的形式(1)浮动式 - 即外层容器浮动布局(简单)

不传图第四次遍历,这时,几次 多深度均为21px;

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

让你,第二次遍历,第几次 多ul的深度全都全都 392——第一张图的深度。

2017-04-18  09:43:55

HTML:

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/410068.htm     * 函数内的变量无法在函数外面访问,在函数内却需用访问函数外的变量。全都全都这里不不传参     * js作用域链的变量访问规则是:随后当前作用域内地处要访问的变量,则使用当前作用域的变量,让你到上一层作用域内寻找,直到全局作用域,随后找只有,则该变量为未声明。     */    function ulIndex(oUl) {        var oldHeight = 100000000;        //设定几次 多很大很大的深度值,让页面在一随后随后开始加载的随后,作比较用,目的上让随便几次 多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;        }    };}

按此规律重复下去,每当几次 多ul深度一致时,几次 多ul深度依次打上去21;

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

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

此篇详解浮动式

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

来源:腾讯课堂笔记https://ke.qq.com/webcourse/index.html#course_id=57390&term_id=100106654&taid=2100199024918574&vid=e1100l36kd7

遍历数值和规律如下图:

压缩版js

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

 拓展

2017-04-17  10:43:19

需用看出,第一行几次 多0表示第一遍遍历几次 多ul均为空,就将第一张图片插入第几次 多ul中,

(2)定位式 - 找不到 单独的浮动容器,全都全都 按照外层容器进行一一定位(僵化 点)

全都全都不一样也正常,让你不不差太多一般。

让你经过我对offset偏移值进行一阵一阵测试的页面中,谷歌和火狐弹出的偏移值和客户区大小的值在各种情况下还会一样的。

if(sT + vH == bHq) {

            console.log(sT + vH);

            console.log(bHq)

            createImg();

 }

再看火狐,他是先遍历几次 多ul并分别弹一次ul的深度,最后在这几次 多ul中计算出最短的,传一张图,让你重复上述遍历步骤,并依次传规定张数。

一阵一阵说明:参数中url和num是不太多的,我是为了想,万一图片的路径和让你显示的数量不同就还得再次深入封装。原本,一劳永逸吧。

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

下图是我理解了这几次 多属性的原理后当时人画的效果图+注释。

第三遍遍历时,第一几次ul随后有了图片,深度也全都全都 392和415,而第几次 多找不到 图,全都全都第几次 多依旧为0;这时第三张图片被放满去第几次 多ul中。

top和left是从margin深度内内外部随后随后开始计算的

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

2017-04-24  11:00:19

实验证明:

这全都全都 原困亲戚朋友最后传入图片顺序不一致的最终原困吧。看老师的演示效果,在谷歌中也是同样的现象。

 

【其实原理两种 点,说白了全都全都 需用想象成三队人在排队等地铁,上边来的人肯定是自动往队伍最短的那一列的最后接着排,

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

两种 结论在最后的代码中,经过测试是合拍的。

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

author:701004176@qq.com

time:2017-04-13

description:瀑布流学习与制作

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

让你和scrolltop找不到 两种 区别

昨天研究让你,其实理论上知道了各种top的区别,让你还是晕晕乎乎不知道用到哪里。结果下班路上一听视频就完整版都明白了。要不说看书背理论没用呢!还是得实战,当时人的认识才是最深刻的。

不传图第二次遍历,两种 的随后,第几次 多ul的深度会变成21,后几次 多是0;

现象很明显。

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

以上划线结论全都全都 在我不明不白情况下做的很不全面的测试时,所写的某两种 特定情况下的现象描述,有待再次求证。

js代码: