这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
瀑布流布局很受广大网民的青睐,本篇文章给大家介绍原生 JS 实现美图瀑布流布局,非常漂亮,需要的朋友可以参考下
自 pinterest 网站爆红以来,国内一度掀起 "仿 PIN" 狂潮,诸如花瓣、蘑菇街等等。正是如此,"瀑布流" 式布局受到广大网民的青睐。众多知名 JS 库,也相继出现 "瀑布流" 布局插件,譬如 jQuery 的 Masonry 插件、KISSY 的 waterfall 插件等。今天闲来无聊,我也自己动手弄了段原生 JS 代码,实现了简单的 "瀑布流" 布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希望能带给你或多或少的收获。
1. js 代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-">
- <title>
- Waterfall代码
- </title>
- </head>
- <body>
- <style type="text/css">
- .wf-main{ position: relative; margin: auto; width: px; overflow: hidden;
- } .wf-main .wf-cld{ position: absolute; margin-bottom: px; padding:px px;
- width: px; left: -px; top: -px; line-height:px; border: px solid #; border-radius:
- px; background-color: #ccc; overflow: hidden; } .wf-cld .inner{ position:
- absolute; left: -px; top: -px; margin-bottom: px; width: px; overflow:
- hidden; border: px solid #f; border-radius: px; } .wf-cld .title{ margin:
- px; padding: px; width: px; color: #f; font-size: px; }
- </style>
- <div class="wf-main" id="wf-main">
- <div class="wf-cld">
- <h style="color:#f">
- 、瀑布流
- </h>
- </div>
- <div class="wf-cld">
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld" id="wf-inner">
- <h class="inner title">
- 、内部瀑布流
- </h>
- <div class="inner">
- -
- <br>
- </div>
- <div class="inner">
- -
- </div>
- <div class="inner">
- -
- </div>
- <div class="inner">
- -
- </div>
- <div class="inner">
- -
- <br>
- </div>
- <div class="inner">
- -
- </div>
- <div class="inner">
- -
- </div>
- <div class="inner">
- -
- </div>
- <div class="inner">
- -
- </div>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- <div class="wf-cld">
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- </div>
- </div>
- <script type="text/javascript">
- function Waterfall(param) {
- this.id = typeof param.container == 'string' ? document.getElementById(param.container) : param.container;
- this.colWidth = param.colWidth;
- this.colCount = param.colCount || ;
- this.cls = param.cls && param.cls != '' ? param.cls: 'wf-cld';
- this.init();
- }
- Waterfall.prototype = {
- getByClass: function(cls, p) {
- var arr = [],
- reg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", "g");
- var nodes = p.getElementsByTagName("*"),
- len = nodes.length;
- for (var i = ; i < len; i++) {
- if (reg.test(nodes[i].className)) {
- arr.push(nodes[i]);
- reg.lastIndex = ;
- }
- }
- return arr;
- },
- maxArr: function(arr) {
- var len = arr.length,
- temp = arr[];
- for (var ii = ; ii < len; ii++) {
- if (temp < arr[ii]) {
- temp = arr[ii];
- }
- }
- return temp;
- },
- getMar: function(node) {
- var dis = ;
- if (node.currentStyle) {
- dis = parseInt(node.currentStyle.marginBottom);
- } else if (document.defaultView) {
- dis = parseInt(document.defaultView.getComputedStyle(node, null).marginBottom);
- }
- return dis;
- },
- getMinCol: function(arr) {
- var ca = arr,
- cl = ca.length,
- temp = ca[],
- minc = ;
- for (var ci = ; ci < cl; ci++) {
- if (temp > ca[ci]) {
- temp = ca[ci];
- minc = ci;
- }
- }
- return minc;
- },
- init: function() {
- var _this = this;
- var col = [],
- //列高
- iArr = []; //索引
- var nodes = _this.getByClass(_this.cls, _this.id),
- len = nodes.length;
- for (var i = ; i < _this.colCount; i++) {
- col[i] = ;
- }
- for (var i = ; i < len; i++) {
- nodes[i].h = nodes[i].offsetHeight + _this.getMar(nodes[i]);
- iArr[i] = i;
- }
- for (var i = ; i < len; i++) {
- var ming = _this.getMinCol(col);
- nodes[i].style.left = ming * _this.colWidth + "px";
- nodes[i].style.top = col[ming] + "px";
- col[ming] += nodes[i].h;
- }
- _this.id.style.height = _this.maxArr(col) + "px";
- }
- };
- new Waterfall({
- "container": "wf-inner",
- "colWidth": ,
- "colCount": ,
- "cls": "inner"
- });
- new Waterfall({
- "container": "wf-main",
- "colWidth": ,
- "colCount":
- });
- </script>
- </body>
- </html>
2. [图片] 瀑布流. jpg
来源: http://www.phperz.com/article/17/0712/269483.html