1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>瀑布流第一步</title> 
  6. <style> 
  7.     *{margin:0px;padding:0px;} 
  8.     #main .pin{ 
  9.         width:225px; 
  10.         height:auto; 
  11.         padding:15px 0px 0px 15px; 
  12.         float:left; 
  13.     } 
  14.  
  15.     #main .pin .box{ 
  16.         width:205px; 
  17.         height:auto; 
  18.         padding:10px; 
  19.         background:#FFF; 
  20.         border:1px solid #CCC; 
  21.         box-shadow:0px 0px 6px #CCC; 
  22.         border-radius:5px; 
  23.     } 
  24.     #main .pin .box img{ 
  25.         width:205px; 
  26.     } 
  27. </style> 
  28. <!-- 页面拖拽插件 --> 
  29. <script type="text/javascript" src="./js/drag.js"> 
  30.  
  31. </script> 
  32. <script type="text/javascript"><!-- 
  33. //1 
  34. window.onload = function () { 
  35.     //2.定义父级 
  36.     var oParent = document.getElementById('main'); 
  37.     //9.调用函数并定义 
  38.     var aPin = getClassObj(oParent,'pin'); 
  39.     //alert(aPin.length); 
  40.     var iPinW = aPin[0].offsetWidth; 
  41.     //alert(iPinW); 
  42.     //10.计算页面可以放下多少个图片 
  43.     var num = Math.floor(document.documentElement.clientWidth/iPinW); 
  44.     //alert(num); 
  45.     //11.设置父级居中的样式 
  46.     oParent.style.cssText = 'width:'+num*iPinW+'px;margin:0 auto;'; 
  47.      
  48.     //12准备一个数组 
  49.     var compareAarr = []; 
  50.     //17定义一个字符串 
  51.     //var str = ''
  52.     //13 
  53.     for(var i=0;i<aPin.length;i++){ 
  54.         //22设置第一行的数量 
  55.         if(i<num){ 
  56.              
  57.          
  58.         //获取每个图品的offsetHeight值 
  59.         compareAarr[i] = aPin[i].offsetHeight; 
  60.         //17获取高度的索引 
  61.         //str += i+'=>'+aPin[i].offsetHeight+'\n'; 
  62.         //23 
  63.         }else{ 
  64.             //取数组中的最小高度  compareAarr 
  65.             var minH = Math.min.apply({},compareAarr); 
  66.             //获取最小的key值 
  67.             var minKey = getMinKey(compareAarr,minH); 
  68.             //定位超出宽度多的那个 
  69.             aPin[i].style.position = 'absolute'
  70.             //取超出的那个图片的top值 
  71.             aPin[i].style.top = minH + 'px'; 
  72.             //设置超出那个图片的left值 
  73.             aPin[i].style.left = aPin[minKey].offsetLeft + 'px'; 
  74.             //超出最后一个在加一 重新计算最低minH 
  75.             compareAarr[minKey] += aPin[i].offsetHeight; 
  76.         } 
  77.     } 
  78.  
  79.      
  80.     //实现图片的拖拽 
  81.     for(var i=num;i<aPin.length;i++){ 
  82.         //绝对定位 
  83.         aPin[i].style.position = 'absolute'
  84.         drag(aPin[i]); 
  85.     } 
  86.     /** 
  87.         获取数组组最小的键值 
  88.         arr数组 
  89.         minH最小键值 
  90.     */ 
  91.     //18定义一个函数   获取数组(compareAarr)中对应的最小的那个高的值(minH) 
  92.     function getMinKey(arr,minH){ 
  93.         for(key in arr){ 
  94.             if(arr[key] == minH){ 
  95.                 return key; 
  96.             } 
  97.         } 
  98.     } 
  99.      
  100.     /** 
  101.         通过class选择元素 
  102.         parent父级 
  103.         className类名 
  104.     */ 
  105.     //3.定义一个函数 
  106.     function getClassObj(parent,className){ 
  107.         //4.定义匹配父级下面所有的元素 
  108.         var obj = parent.getElementsByTagName('*'); 
  109.         //5.定义一个数组 
  110.         var result = []; 
  111.         //6.循环obj 
  112.         for(var i=0;i<obj.length;i++){ 
  113.             if(obj[i].className == className){ 
  114.                 //7.pushu进result中 
  115.                 result.push(obj[i]); 
  116.             } 
  117.         } 
  118.         //8 
  119.         return result; 
  120.     } 
  121.      
  122. --></script> 
  123. </head> 
  124. <body> 
  125.  
  126.     <div id="main"> 
  127.         <div class="pin"><!--每一个小块--> 
  128.             <div class="box"> 
  129.                 <img src="./img/0.jpg"> 
  130.             </div> 
  131.         </div> 
  132.  
  133.         <div class="pin"><!--每一个小块--> 
  134.             <div class="box"> 
  135.                 <img src="./img/1.jpg"> 
  136.             </div> 
  137.         </div> 
  138.  
  139.         <div class="pin"><!--每一个小块--> 
  140.             <div class="box"> 
  141.                 <img src="./img/2.jpg"> 
  142.             </div> 
  143.         </div> 
  144.  
  145.         <div class="pin"><!--每一个小块--> 
  146.             <div class="box"> 
  147.                 <img src="./img/3.jpg"> 
  148.             </div> 
  149.         </div> 
  150.  
  151.         <div class="pin"><!--每一个小块--> 
  152.             <div class="box"> 
  153.                 <img src="./img/4.jpg"> 
  154.             </div> 
  155.         </div> 
  156.  
  157.         <div class="pin"><!--每一个小块--> 
  158.             <div class="box"> 
  159.                 <img src="./img/5.jpg"> 
  160.             </div> 
  161.         </div> 
  162.         <div class="pin"><!--每一个小块--> 
  163.             <div class="box"> 
  164.                 <img src="./img/6.jpg"> 
  165.             </div> 
  166.         </div> 
  167.          
  168.         <div class="pin"><!--每一个小块--> 
  169.             <div class="box"> 
  170.                 <img src="./img/7.jpg"> 
  171.             </div> 
  172.         </div> 
  173.          
  174.         <div class="pin"><!--每一个小块--> 
  175.             <div class="box"> 
  176.                 <img src="./img/8.jpg"> 
  177.             </div> 
  178.         </div> 
  179.         <div class="pin"><!--每一个小块--> 
  180.             <div class="box"> 
  181.                 <img src="./img/4.jpg"> 
  182.             </div> 
  183.         </div> 
  184.         <div class="pin"><!--每一个小块--> 
  185.             <div class="box"> 
  186.                 <img src="./img/9.png"> 
  187.             </div> 
  188.         </div> 
  189.         <div class="pin"><!--每一个小块--> 
  190.             <div class="box"> 
  191.                 <img src="./img/7.jpg"> 
  192.             </div> 
  193.         </div> 
  194.          
  195.         <div class="pin"><!--每一个小块--> 
  196.             <div class="box"> 
  197.                 <img src="./img/8.jpg"> 
  198.             </div> 
  199.         </div> 
  200.         <div class="pin"><!--每一个小块--> 
  201.             <div class="box"> 
  202.                 <img src="./img/9.png"> 
  203.             </div> 
  204.         </div> 
  205.         <div class="pin"><!--每一个小块--> 
  206.             <div class="box"> 
  207.                 <img src="./img/7.jpg"> 
  208.             </div> 
  209.         </div> 
  210.          
  211.         <div class="pin"><!--每一个小块--> 
  212.             <div class="box"> 
  213.                 <img src="./img/8.jpg"> 
  214.             </div> 
  215.         </div> 
  216.         <div class="pin"><!--每一个小块--> 
  217.             <div class="box"> 
  218.                 <img src="./img/9.png"> 
  219.             </div> 
  220.         </div> 
  221.          
  222.         <div class="pin"><!--每一个小块--> 
  223.             <div class="box"> 
  224.                 <img src="./img/0.jpg"> 
  225.             </div> 
  226.         </div> 
  227.  
  228.         <div class="pin"><!--每一个小块--> 
  229.             <div class="box"> 
  230.                 <img src="./img/1.jpg"> 
  231.             </div> 
  232.         </div> 
  233.  
  234.         <div class="pin"><!--每一个小块--> 
  235.             <div class="box"> 
  236.                 <img src="./img/2.jpg"> 
  237.             </div> 
  238.         </div> 
  239.  
  240.         <div class="pin"><!--每一个小块--> 
  241.             <div class="box"> 
  242.                 <img src="./img/5.jpg"> 
  243.             </div> 
  244.         </div> 
  245.         <div class="pin"><!--每一个小块--> 
  246.             <div class="box"> 
  247.                 <img src="./img/4.jpg"> 
  248.             </div> 
  249.         </div> 
  250.         <div class="pin"><!--每一个小块--> 
  251.             <div class="box"> 
  252.                 <img src="./img/0.jpg"> 
  253.             </div> 
  254.         </div> 
  255.  
  256.         <div class="pin"><!--每一个小块--> 
  257.             <div class="box"> 
  258.                 <img src="./img/1.jpg"> 
  259.             </div> 
  260.         </div> 
  261.  
  262.         <div class="pin"><!--每一个小块--> 
  263.             <div class="box"> 
  264.                 <img src="./img/5.jpg"> 
  265.             </div> 
  266.         </div> 
  267.  
  268.         <div class="pin"><!--每一个小块--> 
  269.             <div class="box"> 
  270.                 <img src="./img/3.jpg"> 
  271.             </div> 
  272.         </div> 
  273.         <div class="pin"><!--每一个小块--> 
  274.             <div class="box"> 
  275.                 <img src="./img/4.jpg"> 
  276.             </div> 
  277.         </div> 
  278.         <div class="pin"><!--每一个小块--> 
  279.             <div class="box"> 
  280.                 <img src="./img/5.jpg"> 
  281.             </div> 
  282.         </div> 
  283.  
  284.         <div class="pin"><!--每一个小块--> 
  285.             <div class="box"> 
  286.                 <img src="./img/1.jpg"> 
  287.             </div> 
  288.         </div> 
  289.  
  290.         <div class="pin"><!--每一个小块--> 
  291.             <div class="box"> 
  292.                 <img src="./img/2.jpg"> 
  293.             </div> 
  294.         </div> 
  295.  
  296.         <div class="pin"><!--每一个小块--> 
  297.             <div class="box"> 
  298.                 <img src="./img/3.jpg"> 
  299.             </div> 
  300.         </div> 
  301.         <div class="pin"><!--每一个小块--> 
  302.             <div class="box"> 
  303.                 <img src="./img/5.jpg"> 
  304.             </div> 
  305.         </div> 
  306.     </div> 
  307.      
  308. </body> 
  309. </html> 

 

 

实现效果图