离开了html5，面对“流体力学”，我只能旁观了...

zoukankan html css js c++ java

离开了html5，面对“流体力学”，我只能旁观了...

今天偶见园子里有编辑推荐了一则新闻：那些程序员搞的流体力学的演示先是一个同学用java写了个仿流体的applet，引来众人围观，然后各路神仙不甘落后，先后又有flash版本，html5的canvas版本，c++的版本都出来了。

　　看了之后我也很来兴趣，想试一试，可惜html5的版本已经有了，我不能简简单单步别人后尘吧...于是咬咬牙，说同为web前端层面，你用html5，我偏偏就不用。我就要用原生的JavaScript，就用html 4和css 2,来作苦苦挣扎。

　　结果，挣扎了几个小时，终于发现离开了html5，想要模拟流体运动真是困难啊。而且效率也极低，在500个元素模拟的时候，ff就表示基本跑不动了，ie8以下就更别说了...

所以，最终结果是：

　　只能哀叹一声，离开了了html5，面对“流体力学”，我只能旁观了...

当然，鉴于我只是一只“小虾”，我的失败不排除有其他的“大虾”能破解这个魔咒。不过就html 4 和css 2的这点表现力在document中的话，我个人觉得是很难了.

最后，虽然尝试失败了，依旧还是给各位看客看看我失败的尝试吧：（建议用chrome或其他js引擎给力的浏览器查看）：
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>liquid</title> <meta name="author" content="hongru.chen" /> <style type="text/css"> html {overflow:hidden} body {margin:0; padding:0; position:absolute; height:100%; 100%} #wrap {position:absolute; left:50%; top:50%; 300px; height:300px; margin-left:-150px; margin-top:-150px;} .drop {position: absolute;font-size: 0; 1px;height: 1px;overflow: hidden;background: blue;} </style> <script type="text/javascript"> var Liquid = function () { var wp, parts, space, obj = [], grid, nw, nh, gw, gh, flag = false; var addEvent = function (o, e, f) { o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)}); } var init = function (o) { wp = document.getElementById(o.id); parts = o.parts ? o.parts : 500; space = o.space ? o.space : 3; document.onselectstart = function () { return false; } wp.ondrag = function () { return false; } //start for (var i=0; i<parts; i++) {obj[i] = new Drop()} (function () { nw = wp.offsetWidth; nh = wp.offsetHeight; gw = Math.round(nw/space); gh = Math.round(nh/space); grid = new Array(gw * gh); for (var i=0; i<parts; i++) obj[i].boundary(); for (var i=0; i<parts; i++) obj[i].move(); setTimeout(arguments.callee, 1); })(); } /* main function */ var Drop = function () { var o = document.createElement('span'); o.className = 'drop'; wp.appendChild(o); this.x = Math.random()*50 + 50; this.y = Math.random()*50 + 50; this.vx = this.vy = this.dx = this.dy = 0; this.sty = o.style; } Drop.prototype = { move : function () { if (flag) { this.x += this.dx; this.vx += this.dx; this.vy += this.dy; var opa = Math.random()+.4, wh = Math.ceil(Math.random()*2); this.sty.opacity = opa>1 ? 1 : opa; this.sty.width = wh + 'px'; this.sty.height = 3-wh + 'px'; } this.y += this.dy; this.dx = this.dy = 0; // set position this.sty.left = Math.round(this.x) + 'px'; this.sty.top = Math.round(this.y) + 'px'; }, boundary : function () { //gravity this.vy += .06; this.x += this.vx; this.y += this.vy; //set boundary if (this.x < space*.5) this.dx += (space * .5 - this.x); else if (this.x > nw - space * .5) this.dx -= (this.x - nw + space * .5); if (this.y < space * .5) this.dy += (space * .5 - this.y); else if (this.y > nh - space * .5) {this.dy -= (this.y - nh + space * .5); flag = true;} var gx = Math.round(this.x / space); var gy = Math.round(this.y / space); /* ---- neightbors constraints ---- */ for (var ix = gx - 1; ix <= gx + 1; ix++) { for (var iy = gy - 1; iy <= gy + 1; iy++) { var g = grid[iy * gw + ix] || []; for (j = 0, l = g.length; j < l; j++) { var that = g[j]; var dx = that.x - this.x; var dy = that.y - this.y; var d = Math.sqrt(dx * dx + dy * dy); if (d < space && d > 0) { dx = (dx / d) * (space - d) * .25; dy = (dy / d) * (space - d) * .25; this.dx -= dx; this.dy -= dy; that.dx += dx; that.dy += dy; } } } } /* ---- update neighbors list ---- */ if (!grid[gy * gw + gx]) grid[gy * gw + gx] = [this]; else grid[gy * gw + gx].push(this); } } return init; }(); </script></head> <body> <div id="wrap"></div> <script type="text/javascript"> window.onload = function () { Liquid({ id: 'wrap', space: 4, parts: 500 }) } </script></body> </html>

ps: 看看http://jsbin.com/unovo4 这个用canvas的源码，终于给自己的失败找了一个借口，人家用了canvas，js都写了400多行，怎么可能是自己不用canvas，仅仅100来行的代码能搞定的呢？！

查看全文

相关阅读:
ThinkPHP整合Kindeditor多图处理示例
 KindEditor用法介绍
 MySQL 1064 错误
 Nginx中虚拟主机与指定访问路径的设置方法讲解
 AJAX PHP无刷新form表单提交的简单实现(推荐)
教PHP程序员如何找单位（全职+实习），超有用啊！
利用正则表达式实现手机号码中间4位用星号（*）
PHP项目做完后想上线怎么办，告诉你免费上线方法！
备战NOIP——模板复习16
备战NOIP——STL复习1

原文地址：https://www.cnblogs.com/hongru/p/1912820.html