夏日博客

A-A+

jQuery+HTML5瀑布流布局例子

2016年01月12日 前端设计 暂无评论 阅读 6 views 次

瀑布流在图片网站应用到最多了就是拖动就可以实现瀑布流的功能了，下面我们一起来看一个jQuery+HTML5瀑布流布局例子，希望此例子能够对各位朋友带来帮助。

这是一款JavaScript与HTML5实现美女瀑布流布局，本方法是把图片的路径写在了JS的数组里，不过重点好像不是在这里，而是在图片如何 自动排列的问题，你可以运行本实例后，点击“加载瀑布流布局”按钮，即可看到图片的瀑布流排列效果，现在很流行这个，希望您从本代码中能找到一些灵感,代码如下:

  1. <!DOCTYPE HTML>  
  2.    
  3. <html>  
  4.    
  5. <head>  
  6.    
  7. <title>美女瀑布流</title>  
  8.    
  9. <style type="text/css">  
  10.    
  11. *{margin:0;padding:0}  
  12.    
  13. div.section{overflow:hidden}  
  14.    
  15. div.aside{width:225px;float:left;display:inline}  
  16.    
  17. div.aside div.content{margin:5px;background:#666}  
  18.    
  19. div.aside div.content img{width:205px;margin:5px;}  
  20.    
  21. div.aside div.content div.imgcaption{margin:0 5px;line-height:20px}  
  22.    
  23. </style>  
  24.    
  25. </head>  
  26.    
  27. <body>  
  28.    
  29. <div class="section">  
  30.    
  31. <div class="aside"></div>  
  32.    
  33. <div class="aside"></div>  
  34.    
  35. <div class="aside"></div>  
  36.    
  37. <div class="aside"></div>  
  38.    
  39. </div>  
  40.    
  41. <button>加载瀑布流布局</button>  
  42.    
  43. </body>  
  44.    
  45. <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" src="jquery.min.js"></script>  
  46.    
  47. <script type="text/javascript">  
  48.    
  49. var json=[  
  50.    
  51. {"text":"1","src":"images/1.jpg","height":"273"},  
  52.    
  53. {"text":"2","src":"images/2.jpg","height":"273"},  
  54.    
  55. {"text":"3","src":"images/3.jpg","height":"306"},  
  56.    
  57. {"text":"4","src":"images/4.jpg","height":"270"},  
  58.    
  59. {"text":"5","src":"images/5.jpg","height":"273"},  
  60.    
  61. {"text":"6","src":"images/6.jpg","height":"307"},  
  62.    
  63. {"text":"7","src":"images/7.jpg","height":"272"},  
  64.    
  65. {"text":"8","src":"images/8.jpg","height":"285"},  
  66.    
  67. {"text":"9","src":"images/9.jpg","height":"303"},  
  68.    
  69. {"text":"10","src":"images/10.jpg","height":"272"},  
  70.    
  71. {"text":"11","src":"images/5.jpg","height":"273"},  
  72.    
  73. {"text":"12","src":"images/7.jpg","height":"273"},  
  74.    
  75. {"text":"13","src":"images/3.jpg","height":"280"}  
  76.    
  77. ]  
  78.    
  79. function getSmallDiv(wrap,oD){  
  80.    
  81. var len=oD.length;  
  82.    
  83. var h=Infinity;  
  84.    
  85. var getD;  
  86.    
  87. for(var i=0;i<len;i++){  
  88.    
  89. if(oD.eq(i).height()<h){  
  90.    
  91. h=oD.eq(i).height();  
  92.    
  93. getD=oD.eq(i);  
  94.    
  95. }  
  96.    
  97. }  
  98.    
  99. return getD;  
  100.    
  101. }  
  102.    
  103. $("button").click(function(){  
  104.    
  105. for(var i=0;i<json.length;i++){  
  106.    
  107. var str;  
  108.    
  109. str="<div class=\"content\">";  
  110.    
  111. str+="<img src="+json[i].src+" height="+json[i].height+" alt=\"\" />";  
  112.    
  113. str+="<div class=\"imgcaption\">"+json[i].text+"</div>";  
  114.    
  115. str+="</div>";  
  116.    
  117. getSmallDiv($(".section"),$(".aside")).append(str);  
  118.    
  119. }  
  120.    
  121. });  
  122.    
  123. </script>  
  124.    
  125. </html>  
标签：

给我留言