We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
在慕课网学习,利用原生js和jquery以及CSS3来进行瀑布流的布局, 大家有兴趣可以取看看。下面我想对这门课程所学到的东西做一个总结。源码我已经发在这个仓库里卖waterfall文件夹里。
这个布局就类似与花瓣网站一样,在每一列中是等宽不等高的。当我们滑到页面的最底部的时候,可以无线加载。
利用的是定位的原理,包裹所有元素的大盒子,是相对定位的。假如第一排,有六个元素,他们的宽度是一样,但是他们高度却不是一样的,下一排的第一个,要以第一排的高度最小的进行定位,然后更新那六个的高度,下一个元素再以更新后最小高度进行定位。如此循环。
当最后一个元素的的高度露出一般,就开始加载数据,实现无线加载的原理,即当最后一个元素里它relative元素的offsetTop+自身高度的一半小于浏览器可视高度加上scrollTop的,即可以加载数据了。
最后一排的有些元素,只有一小半,后面的跑到最顶端上面去了,这是出现的问题。
这个上网搜了一下解决方法是:在大盒子包裹的小盒子里面加上以下css就可以解决
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */
The text was updated successfully, but these errors were encountered:
No branches or pull requests
在慕课网学习,利用原生js和jquery以及CSS3来进行瀑布流的布局,
大家有兴趣可以取看看。下面我想对这门课程所学到的东西做一个总结。源码我已经发在这个仓库里卖waterfall文件夹里。
原理
瀑布流的布局是怎样的?
这个布局就类似与花瓣网站一样,在每一列中是等宽不等高的。当我们滑到页面的最底部的时候,可以无线加载。
瀑布流原理
利用的是定位的原理,包裹所有元素的大盒子,是相对定位的。假如第一排,有六个元素,他们的宽度是一样,但是他们高度却不是一样的,下一排的第一个,要以第一排的高度最小的进行定位,然后更新那六个的高度,下一个元素再以更新后最小高度进行定位。如此循环。
加载到底部进行从后台加载数据的原理
当最后一个元素的的高度露出一般,就开始加载数据,实现无线加载的原理,即当最后一个元素里它relative元素的offsetTop+自身高度的一半小于浏览器可视高度加上scrollTop的,即可以加载数据了。
这个加载条件的判读有一个疑问,那就是如果最后一个元素的高度很小,而它所在的这一排中,其他元素比他的高度的多,那么其他元素还没到一半没看到,那么就开始加载数据,是不是有更好的优化条件?
CSS布局遇到的问题
最后一排的有些元素,只有一小半,后面的跑到最顶端上面去了,这是出现的问题。
这个上网搜了一下解决方法是:在大盒子包裹的小盒子里面加上以下css就可以解决
这几种的方法的比较
他的多栏布局,不是安装顺序,他是一列排完,在排另一列,不是js的横向排列的。还有一个面的一个bug。但是不可忽视这个css布局的优势。
在这个课程遇到需要补习的知识
多个就不对了,以及插入DOM中的,性能的优化。
The text was updated successfully, but these errors were encountered: