Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

瀑布流布局总结 #18

Open
cy0707 opened this issue Oct 28, 2016 · 0 comments
Open

瀑布流布局总结 #18

cy0707 opened this issue Oct 28, 2016 · 0 comments

Comments

@cy0707
Copy link
Owner

cy0707 commented Oct 28, 2016

在慕课网学习,利用原生js和jquery以及CSS3来进行瀑布流的布局
大家有兴趣可以取看看。下面我想对这门课程所学到的东西做一个总结。源码我已经发在这个仓库里卖waterfall文件夹里。

原理

瀑布流的布局是怎样的?

这个布局就类似与花瓣网站一样,在每一列中是等宽不等高的。当我们滑到页面的最底部的时候,可以无线加载。

瀑布流原理

利用的是定位的原理,包裹所有元素的大盒子,是相对定位的。假如第一排,有六个元素,他们的宽度是一样,但是他们高度却不是一样的,下一排的第一个,要以第一排的高度最小的进行定位,然后更新那六个的高度,下一个元素再以更新后最小高度进行定位。如此循环。

加载到底部进行从后台加载数据的原理

waterfall

当最后一个元素的的高度露出一般,就开始加载数据,实现无线加载的原理,即当最后一个元素里它relative元素的offsetTop+自身高度的一半小于浏览器可视高度加上scrollTop的,即可以加载数据了。

这个加载条件的判读有一个疑问,那就是如果最后一个元素的高度很小,而它所在的这一排中,其他元素比他的高度的多,那么其他元素还没到一半没看到,那么就开始加载数据,是不是有更好的优化条件?

CSS布局遇到的问题

最后一排的有些元素,只有一小半,后面的跑到最顶端上面去了,这是出现的问题。

这个上网搜了一下解决方法是:在大盒子包裹的小盒子里面加上以下css就可以解决

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */

这几种的方法的比较

  1. js原始的方法的,需要对各个浏览器进行兼容处理,要复杂一些,而jquery进行了各种兼容。是一个不错的选择。
  2. css3的多栏布局,用起来很简单,但是css3只能用在现代浏览器中,兼容性是硬伤,还有一点那就是
    他的多栏布局,不是安装顺序,他是一列排完,在排另一列,不是js的横向排列的。还有一个面的一个bug。但是不可忽视这个css布局的优势。

在这个课程遇到需要补习的知识

    • 原生javascript中浏览器的各种尺寸获取方法的复习,好好的把他们理解清楚,以及他们在jquery中对应的方法要好好的了解一下。加以好好区别
    • CSS3的多栏布局的column相关属性好好的进行学习,顺便把CSS3不熟悉的好好学一下,把知道的复习一边。
    • 这个瀑布流中没有针对窗口变化,进行重新布局,可以进行优化一下。
    • 对老师讲的代码,进行优化一下,例如那个js原生的获取class的方法,只能针对单个class的名字,
      多个就不对了,以及插入DOM中的,性能的优化。
    • 在写jquery版本的时候,在IE下布局没有问题,但是在chrome下,却一直出现问题,但是代码都是对的,一直想不明白,想了一会才发现,原来是因为jquery还没加载完成,所以样式没出来,所以把jquery放在body的上面就好了,加载顺序这个也需要好好的补一下。
    • 这个无线加载数据的原理,让我联想到可以再做一个移动端的网页滑到底部,加载10条或者20条数据的列表。以及分页原理。还可以用vue.js做一个分页和无线加载的demo,这这样即掌握了原生的原理,又可以对vue.js的进一步的熟练。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant