“模板法”学习类pinterest瀑布流的前端实现

如今类Pinterest网站越来越多，瀑布流越来越火，不过对我们这些前端来说，瀑布的实现方式才是我们最关心的。就目前来说，我认为主要是下面两种：

固定列数的多列浮动（蘑菇街等网站），这种方式列数一般固定，呈现良好，浏览器解释起来比较轻松
绝对定位与相对定位结合（pinterest等网站），动态计算列数，可把显示信息量最大化，频繁变换显示区域时，浏览器有时会比较吃力

向来对比较新的东西感兴趣，今天结合一套wordpress模板学习第二种实现方式。

首先说明一下自己曾经对定位问题产生过的误解：absolute的英文意思是绝对的意思，但在实际中是针对父级元素元素定位，如果父级元素没有position:relative|absolute，则追至再上一个父级元素，直至相对于文档的左上角定位，因此，千万不能默认absolute是相对于页面左上角进行定位，这样会大大埋没absolute的功能和用途。

我每次看到一种新奇的布局都会在网上找类似的wordpress模板，这样学习时，既可以直观地查看显示效果，也可以修改代码后，看效果，屡试不爽，呵呵。今天找的这套wordpress模板名称叫imbalance-2（文章末尾有下载地址），它利了jQuery的Masonry插件来实现瀑布流，Masonry是一个基于jQuery的页面布局插件。先来看看输出到前台的代码吧

数据块中的style是由javascript动态生成的，这也说明，浏览器在得到页面中的各个元素的大小以后，依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束，然后依次再把所有需要显示的数据块排列整齐。当然，这个过程是由masonry内部完成的。

还有一个重要的部分是加载数据，当用户需要瀑布向下流动的时候，就需要对更多的数据块实现异步加载并重新布局。加载的触发事件可是滚动到页面底部，也可是点击加载按钮（本模板采用的方式）等等。当数据加载时，数据块照上述过程呈现，数据显示区域#boxes就会重新计算高度。

用wordpress的园友们可以一起研究一下这种瀑布流，这可能是目前比较好的瀑布流了。说了半天，从这里看看效果吧，还有imbalance-2的下载地址。

转载于:https://www.cnblogs.com/cnliu/archive/2012/05/15/learn-pinterester.html

“模板法”学习类pinterest瀑布流的前端实现相关推荐

Pinterest瀑布流+UDC
转自udc.weibo.com(原文地址) 瀑布流式布局,想必设计师们已不再陌生,随着pinterest自2011年开始走红,瀑布流式的布局被越来越多的网站所使用.花瓣网.堆糖网.布兜.发现啦,美丽说 ...
PInterest瀑布流类网站收集
纷客365网花瓣网
堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
40套服装行业响应式Html5模板春夏时装秀网站模板穿衣搭配网站模板瀑布流排版风格网站模板模特服装展企业网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
40套服装行业响应式Html5模板春夏时装秀网站模板穿衣搭配网站模板瀑布流排版风格网站模板模特服装展企业网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅 ...
国内pinterest发展介绍------瀑布流效果
国内pinterest发展介绍 pinterest的成功,源于互联网的开放与分享,还有读图时代的到来和社交网络的推动.pinteres创新了视觉分享的社交模式--兴趣图谱,简化了图片这种具有互联网传播 ...
react 原生html 插件,纯原生JS的瀑布流插件Macy.js，前端必备插件
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂 ...
前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
Django模板语言中的自定义方法filter过滤器实现web网页的瀑布流
模板语言自定义方法介绍自定义方法注意事项 Django中有simple_tag 和 filter 两种自定义方法,之前也提到过,需要注意的是扩展目录名称必须是templatetags templa ...
图片流_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...

“模板法”学习类pinterest瀑布流的前端实现

“模板法”学习类pinterest瀑布流的前端实现相关推荐

最新文章

热门文章