手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

瀑布流

Submitted by gouki on 2012, November 8, 6:23 PM

瀑布流说来也流行了和很久了。我现在的品鉴网（http://photo.pinjian.net）也是用了瀑布流。而且也正好是我想转的这篇文章中的一个JS效果。
事实上，我关注这个JS效果很久了，他最初的时候是实现了div的任意组合排版。本来是用在排版上的，结果被现在引用成图片的展示了。它就是：jQuery Masonry http://masonry.desandro.com/index.html
如果你去它的网站上，你可以看到，效果那是灰常的多，不过由于仅仅是基础，你要想更好的展现，必须要基于它再做一次开发。

不得不说，http://www.21andy.com/blog/20120527/2041.html，这里收藏了很多瀑布流的，我当然也就无需再一一找寻了。

随便转上一小段重要的URL：

目前而言实现瀑布流主要有3种方式: float, absolute, css3 colum.
最佳实现方式是绝对定位 absolute
最大的缺点就是很耗CPU内存资源，机器烂很容易卡死！

教程 http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

jQuery 实现 Waterfall 插件集合

jQuery.waterfall https://github.com/dio-el-claire/jquery.waterfall
jQuery Masonry http://masonry.desandro.com/index.html
jQuery WookMark http://www.wookmark.com/jquery-plugin
jQuery Isotope http://isotope.metafizzy.co/demos/layout-modes.html
jQuery iMuFeng Waterfall https://github.com/iMuFeng/Waterfall

当然这些玩意并非只有jQuery才能完成，KISSY也有插件。

KISSY Waterfall http://docs.kissyui.com/docs/html/demo/component/waterfall/index.html

如果你有兴趣，就看看喽。我是准备将pinjian.net中的图片重新调整了。为了更好的展现。同时。。可能数据源会引用国内的，否则太卡了。当然我会新开项目。不是叫photo.pinjian.net了。黑黑

Javascript | 评论:0 | 阅读:15820

推荐插件：jquery-bbq

Submitted by gouki on 2012, June 7, 8:48 AM

什么 是jquery BBQ?
这是一个jquery插件，BBQ的意思是back button & query。你知道的，以前的jqueryTAB在点击后都无法通过后退和前进恢复原来的点击事件等。而BBQ在每次点击的时候都相当于在历史里加入了一个记录。也就因此可以使得我们能够通过浏览器的前进、后退来重现刚才的点击。

官网在这里：https://github.com/cowboy/jquery-bbq

jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods.

This plugin and the jQuery urlInternal plugin supersede the URL Utils plugin.

Note: If you’re using jQuery 1.3.2 or earlier and need BBQ to merge query string or fragment params containing [], you’ll want to include the jQuery 1.4 .param method in your code.

Also, my article Cooking BBQ: the original recipe gives a history of jQuery BBQ along with some plugin authoring guidelines, if you’re interested.

What jQuery BBQ allows you to do:

While this brief overview will give you the broad strokes, for specifics you should look at the the basic examples below, read the documentation, and check out the full examples listed above.

  • Deserialize any params string, the document query string or fragment into an object, including the new jQuery.param format (new in jQuery 1.4, read more here). (example)
  • Merge any URL plus query string or fragment params—in an object, params string or second URL (including the current document location)—into a new URL.
  • Update the “URL attribute” (ie. a[href], img[src], form[action], etc) in multiple elements, merging any URL plus query string or fragment params—in an object, params string or second URL (including the current document location)—into a new URL, which is then set into that attribute.
  • Push (and retrieve) bookmarkable, history-enabling “state” objects or strings onto the document fragment, allowing cross-browser back- and next-button functionality for dynamic web applications (example 1, example 2, example 3)
  • Bind event handlers to a normalized, cross-browser hashchange event (example 1, example 2, example 3)

 

These working examples, complete with fully commented code, illustrate a few ways in which this plugin can be used.

http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/
http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/
http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/
http://benalman.com/code/projects/jquery-bbq/examples/deparam/

Tags: jquery, jquery-bbq

Javascript | 评论:1 | 阅读:24202

insertBefore

Submitted by gouki on 2012, April 23, 10:12 PM

有时候发现insertBefore还是很有用的。
在指定的内容前插入指定的元素，果然还是很不错：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7. <body>  
  8. <div id="test">  
  9. <div class="x1">Node1</div>  
  10. <div class="x1">Node2</div>  
  11. <div class="x1">Node3</div>  
  12. </div>  
  13. <script type="text/javascript">  
  14. var oTest = document.getElementById("test");  
  15. //var x2= document.getElementsByTagName("div");  
  16. var x2 = document.getElementsByClassName("x1");  
  17. var newNode = document.createElement("div");  
  18. newNode.innerHTML = "This is a test";  
  19. oTest.insertBefore(newNode,x2[0]);  
  20. oTest.removeChild(x2[0]);  
  21. </script>  
  22. </body>  
  23. </html>  

这段代码的主要来源是http://bbs.blueidea.com/thread-2877763-1-1.html，果然是可以做参考的。比如放在哪个节点前，删除哪个节点。
如果将节点都存储到localStorage中，就能够随时替换节点了。
做个纪录

Tags: insertbefore

Javascript | 评论:0 | 阅读:14844

一段无聊的代码[多行自动截取字符并加上...]

Submitted by gouki on 2012, March 29, 8:51 AM

一段未优化过的无聊JS代码，暂时不优化了，以实现为主：

XML/HTML代码
  1. <style type="text/css">.zxx_text_overflow_6{ width:100px; height:100px; border:1px solid #CCC; }</style>  
  2. <div class="zxx_text_overflow_6">  
  3.     <img src="i.png" alt="" style="float:right;width:50px;" />  
  4.     <p>你个杀千刀的，怎么写了这么多的文字，我要被拦腰截。断了啊，kitty救我！你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！你个杀千刀的，怎么写了这么多的文字，我要被拦腰截断了啊，kitty救我！</p>  
  5. </div>  
  6. <script type="text/javascript">  
  7.     String.prototype.strtoarray=function (){  
  8.         var t=[], b=/(\s*[\S\u00ad]+\s*)/g, f='';  
  9.         for(i=0; i<this.length; i++){  
  10.             c=this.charCodeAt(i);  
  11.             t.push(c>128?" "+this.charAt(i):this.charAt(i));//p += c < 128 ? 1 : (c < 2048 ? 2 : (c < 65536 ? 3 : 4));  
  12.         }  
  13.         //s = t.join("").split(b);  
  14.         return t.join("").split(b).join("Ω").replace(/ΩΩ/g,"Ω").split("Ω");  //这一段其实挺有意思，理论上，上一句就OK了，但事实上这一句才正常。。。好吧。
  15.         //    return s;  
  16.     }  
  17.     var t = +new Date();   
  18.     var d=document.querySelector(".zxx_text_overflow_6");  
  19.     var p=document.querySelector(".zxx_text_overflow_6 p");  
  20.     var pInfo = getComputedStyle(p);  
  21.     var s=p.innerHTML.strtoarray();  
  22.     var pData = [];  
  23.     p.innerHTML='';  
  24.     for(var i=0; i<s.length; i++){  
  25.         p.innerHTML+=s[i];  
  26.         pData.push(s[i]);  
  27.         if((p.offsetHeight+parseInt(pInfo.marginTop)+parseInt(pInfo.paddingTop))>= d.offsetHeight){  
  28.             if(s[i-1]!="。"||s[i-1]!='.'){  
  29.                 p.innerHTML = pData.slice(0,-2).join("")+ "...";  
  30.             }else{  
  31.                 p.innerHTML = pData.slice(0,-1).join("");  
  32.             }  
  33.             break;  
  34.         }  
  35.     }  
  36.     alert("执行时间" +((+new Date()) - t )/ 1000 + "秒");  
  37. </script>  

效果如下：
大小: 14.12 K 尺寸: 139 x 129 浏览: 2104 次 点击打开新窗口浏览全图

Javascript | 评论:0 | 阅读:16165

备份一个video的JS

Submitted by gouki on 2012, February 16, 5:58 PM

备份一个JS，不是为了代码很优秀，而是。。。想直接用里面的事件，就当成参考了：

JavaScript代码
  1. var media_events=new Array();  
  2. // was extracted from the spec in November 2011  
  3. media_events["loadstart"]=0;  
  4. media_events["progress"]=0;  
  5. media_events["suspend"]=0;  
  6. media_events["abort"]=0;  
  7. media_events["error"]=0;  
  8. media_events["emptied"]=0;  
  9. media_events["stalled"]=0;  
  10. media_events["loadedmetadata"]=0;  
  11. media_events["loadeddata"]=0;  
  12. media_events["canplay"]=0;  
  13. media_events["canplaythrough"]=0;  
  14. media_events["playing"]=0;  
  15. media_events["waiting"]=0;  
  16. media_events["seeking"]=0;  
  17. media_events["seeked"]=0;  
  18. media_events["ended"]=0;  
  19. media_events["durationchange"]=0;  
  20. media_events["timeupdate"]=0;  
  21. media_events["play"]=0;  
  22. media_events["pause"]=0;  
  23. media_events["ratechange"]=0;  
  24. media_events["volumechange"]=0;  
  25. var media_controller_events=new Array();  
  26. // was extracted from the spec in November 2011  
  27. media_controller_events["emptied"]=0;  
  28. media_controller_events["loadedmetadata"]=0;  
  29. media_controller_events["loadeddata"]=0;  
  30. media_controller_events["canplay"]=0;  
  31. media_controller_events["canplaythrough"]=0;  
  32. media_controller_events["playing"]=0;  
  33. media_controller_events["ended"]=0;  
  34. media_controller_events["waiting"]=0;  
  35. media_controller_events["durationchange"]=0;  
  36. media_controller_events["timeupdate"]=0;  
  37. media_controller_events["play"]=0;  
  38. media_controller_events["pause"]=0;  
  39. media_controller_events["ratechange"]=0;  
  40. media_controller_events["volumechange"]=0;  
  41. // was extracted from the spec in November 2011  
  42. var media_properties=[ "error","src","currentSrc","crossOrigin","networkState","preload","buffered","readyState","seeking","currentTime","initialTime","duration","startOffsetTime","paused","defaultPlaybackRate","playbackRate","played","seekable","ended","autoplay","loop","mediaGroup","controller","controls","volume","muted","defaultMuted","audioTracks","videoTracks","textTracks","width","height","videoWidth","videoHeight","poster" ];  
  43. var media_properties_elts=null;  
  44. var webm=null;  
  45. function init(){  
  46.     document._video=document.getElementById("video");  
  47.     webm=document.getElementById("webm");  
  48.     init_events();  
  49.     init_properties();  
  50.     init_mediatypes();  
  51.     // properties are updated even if no event was triggered  
  52.     setInterval(update_properties,500);  
  53. }  
  54. document.addEventListener("DOMContentLoaded",init,false);  
  55. function init_events(){  
  56.     for(key in media_events){  
  57.         document._video.addEventListener(key,capture,false);  
  58.     }  
  59.     var tbody=document.getElementById("events");  
  60.     var i=1;  
  61.     var tr=null;  
  62.     for(key in media_events){  
  63.         if(tr==null) tr=document.createElement("tr");  
  64.         var th=document.createElement("th");  
  65.         th.textContent=key;  
  66.         var td=document.createElement("td");  
  67.         td.setAttribute("id","e_"+key);  
  68.         td.innerHTML="0";  
  69.         td.className="false";  
  70.         tr.appendChild(th);  
  71.         tr.appendChild(td);  
  72.         if((i++%5)==0){  
  73.             tbody.appendChild(tr);  
  74.             tr=null;  
  75.         }  
  76.     }  
  77.     if(tr!=null) tbody.appendChild(tr);  
  78. }  
  79. function init_properties(){  
  80.     var tbody=document.getElementById("properties");  
  81.     var i=0;  
  82.     var tr=null;  
  83.     media_properties_elts=new Array(media_properties.length);  
  84.     do{  
  85.         if(tr==null) tr=document.createElement("tr");  
  86.         var th=document.createElement("th");  
  87.         th.textContent=media_properties[i];  
  88.         var td=document.createElement("td");  
  89.         td.setAttribute("id","p_"+media_properties[i]);  
  90.         var r=eval("document._video."+media_properties[i]);  
  91.         td.innerHTML=r;  
  92.         if(typeof(r)!="undefined"){  
  93.             td.className="true";  
  94.         }else{  
  95.             td.className="false";  
  96.         }  
  97.         tr.appendChild(th);  
  98.         tr.appendChild(td);  
  99.         media_properties_elts[i]=td;  
  100.         if((++i%3)==0){  
  101.             tbody.appendChild(tr);  
  102.             tr=null;  
  103.         }  
  104.     }while(i<media_properties.length);  
  105.     if(tr!=null) tbody.appendChild(tr);  
  106. }  
  107. function init_mediatypes(){  
  108.     var tbody=document.getElementById("m_video");  
  109.     var i=0;  
  110.     var tr=document.createElement("tr");  
  111.     var videoTypes=[ "video/ogg","video/mp4","video/webm" ];  
  112.     i=0;  
  113.     tr=document.createElement("tr");  
  114.     do{  
  115.         var td=document.createElement("th");  
  116.         td.innerHTML=videoTypes[i];  
  117.         tr.appendChild(td);  
  118.     }while(++i<videoTypes.length);  
  119.     tbody.appendChild(tr);  
  120.     i=0;  
  121.     tr=document.createElement("tr");  
  122.     if(!!document._video.canPlayType){  
  123.         do{  
  124.             var td=document.createElement("td");  
  125.             var support=document._video.canPlayType(videoTypes[i]);  
  126.             td.innerHTML='"'+support+'"';  
  127.             if(support==="maybe"){  
  128.                 td.className="true";  
  129.             }else if(support===""){  
  130.                 td.className="false";  
  131.             }  
  132.             tr.appendChild(td);  
  133.         }while(++i<videoTypes.length);  
  134.         tbody.appendChild(tr);  
  135.     }  
  136. }  
  137. function capture(event){  
  138.     media_events[event.type]=media_events[event.type]+1;  
  139.     for(key in media_events){  
  140.         var e=document.getElementById("e_"+key);  
  141.         if(e){  
  142.             e.innerHTML=media_events[key];  
  143.             if(media_events[key]>0) e.className="true";  
  144.         }  
  145.     }  
  146.     update_properties();  
  147. }  
  148. function update_properties(){  
  149.     var i=0;  
  150.     for(key in media_properties){  
  151.         var val=eval("document._video."+media_properties[key]);  
  152.         /* 
  153.          if (typeof val === "TimesRanges") { 
  154.          val = val.length + " TimeRanges"; 
  155.          } 
  156.          */  
  157.         media_properties_elts[i++].innerHTML=val;  
  158.     }  
  159.     if(!!document._video.audioTracks){  
  160.         var td=document.getElementById("m_audiotracks");  
  161.         td.innerHTML=document._video.audioTracks.length;  
  162.         td.className="true";  
  163.     }  
  164.     if(!!document._video.videoTracks){  
  165.         var td=document.getElementById("m_videotracks");  
  166.         td.innerHTML=document._video.videoTracks.length;  
  167.         td.className="true";  
  168.     }  
  169.     if(!!document._video.textTracks){  
  170.         var td=document.getElementById("m_texttracks");  
  171.         td.innerHTML=document._video.textTracks.length;  
  172.         td.className="true";  
  173.     }  
  174. }  
  175. var videos=new Array();  
  176. videos[0]=[  
  177.     "http://media.w3.org/2010/05/sintel/poster.png","http://media.w3.org/2010/05/sintel/trailer.mp4","http://media.w3.org/2010/05/sintel/trailer.ogv","http://media.w3.org/2010/05/sintel/trailer.webm"  
  178. ];  
  179. videos[1]=[  
  180.     "http://media.w3.org/2010/05/bunny/poster.png","http://media.w3.org/2010/05/bunny/trailer.mp4","http://media.w3.org/2010/05/bunny/trailer.ogv"  
  181. ];  
  182. videos[2]=[  
  183.     "http://media.w3.org/2010/05/bunny/poster.png","http://media.w3.org/2010/05/bunny/movie.mp4","http://media.w3.org/2010/05/bunny/movie.ogv"  
  184. ];  
  185. videos[3]=[  
  186.     "http://media.w3.org/2010/05/video/poster.png","http://media.w3.org/2010/05/video/movie_300.mp4","http://media.w3.org/2010/05/video/movie_300.ogv","http://media.w3.org/2010/05/video/movie_300.webm"  
  187. ];  
  188. function switchVideo(n){  
  189.     if(n>=videos.length) n=0;  
  190.     var mp4=document.getElementById("mp4");  
  191.     var ogv=document.getElementById("ogv");  
  192.     var parent=ogv.parentNode;  
  193.     document._video.setAttribute("poster",videos[n][0]);  
  194.     mp4.setAttribute("src",videos[n][1]);  
  195.     ogv.setAttribute("src",videos[n][2]);  
  196.     if(videos[n][3]){  
  197.         if(webm.parentNode==null){  
  198.             parent.insertBefore(webm,ogv);  
  199.         }  
  200.         webm.setAttribute("src",videos[n][3]);  
  201.     }else{  
  202.         if(webm.parentNode!=null){  
  203.             parent.removeChild(webm);  
  204.         }  
  205.     }  
  206.     document._video.load();  
  207. }  

这一段JS是从http://www.w3.org/2010/05/video/mediaevents.html拷贝而来，具体的演示就在这个页面了。我是想知道video标签中的一些事件。controller_event几乎用不到。
中文说明这里有：http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/

XML/HTML代码
  1. //错误状态  
  2.    Media.error; //null:正常  
  3.    Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  
  4.   
  5. //网络状态  
  6.    Media.currentSrc; //返回当前资源的URL  
  7.    Media.src = value; //返回或设置当前资源的URL  
  8.    Media.canPlayType(type); //是否能播放某种格式的资源  
  9.    Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  
  10.    Media.load(); //重新加载src指定的资源  
  11.    Media.buffered; //返回已缓冲区域，TimeRanges  
  12.    Media.preload; //none:不预载 metadata:预载资源信息 auto:  
  13.   
  14. //准备状态  
  15.    Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  
  16.    Media.seeking; //是否正在seeking  
  17.   
  18. //回放状态  
  19.    Media.currentTime = value; //当前播放的位置，赋值可改变位置  
  20.    Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0  
  21.    Media.duration; //当前资源长度 流返回无限  
  22.    Media.paused; //是否暂停  
  23.    Media.defaultPlaybackRate = value;//默认的回放速度，可以设置  
  24.    Media.playbackRate = value;//当前播放速度，设置后马上改变  
  25.    Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文  
  26.    Media.seekable; //返回可以seek的区域 TimeRanges  
  27.    Media.ended; //是否结束  
  28. Media.autoPlay; //是否自动播放  
  29. Media.loop; //是否循环播放  
  30.    Media.play();    //播放  
  31.    Media.pause();   //暂停  
  32.   
  33. //控制  
  34. Media.controls;//是否有默认控制条  
  35.    Media.volume = value; //音量  
  36.    Media.muted = value; //静音  
  37.   
  38.    //TimeRanges(区域)对象  
  39. TimeRanges.length; //区域段数  
  40. TimeRanges.start(index) //第index段区域的开始位置  
  41. TimeRanges.end(index) //第index段区域的结束位置  

借鉴一下。

Tags: html5, video, audio

Javascript | 评论:0 | 阅读:23031

Records:298«‹10111213141516171819›»