完美圖檔蒙太奇的JS效果基于JQuery實作（多個大小不同圖檔拼接成圖檔牆）
最近開發一個寵物服務網站 http://www.teyua.com/ 裡面有個照片更新欄目，需要實作這個功能。
參考了很多，包括國外的圖檔牆，就是把多個大小不一樣的圖檔根據一個算法整齊的組合成為圖檔牆。
需要實作的功能有：自動拼接，橫豎都要完美對齊，視窗大小變化是自動調整，最後依然完美對齊，同時還要相容大部分浏覽器。
網上找到的所有實作，都有缺陷，包括百度www.badu.com的圖檔搜尋，組合的圖檔都有缺陷，看下圖，右側部分紅框，邊緣未對齊。
Bing的圖檔搜尋http://cn.bing.com/images?FORM=Z9LH拼接的圖檔牆也有缺陷，而且比百度還嚴重，請看下圖中間紅框，未對齊，出現了差異。
由于沒有找到完美實作隻有自己搞定了，仔細計算了算法。借助JQuery，終于完美實作，看下圖。實際效果請看http://www.teyua.com/photo.jsp
打開頁面後，調整一下視窗大小，才能看見自動根據視窗大小調整整個布局的效果，實時調整無縫布局。
以下是實作代碼。總共隻有一個方法，調用即可。montage(id,minmun),id是div的id裡面有圖檔需要處理，minimun是表示每行最少顯示幾個圖檔。
而且隻循環一次，之前是有三層嵌套循環，經過優化隻循環一次即可。
//照片蒙太奇
function montage(id,minimum){
var $container = $(document.getElementById(id));
if($container.length){
var temps=new Array(),view_width=$container.width();
var row_width,row_height,row_space;//行寬高
var space_width,space_height;//不能縮放的間隔空間(padding+margin+border)
var width,height;//單個内部寬高(img)
var $images = $container.children();
var length = $images.length;//總數,用于遞減
//開始循環處理
$images.each(function (index,element){
var $item = $(element);
length--;
width = Number($item.attr("data-width"));
height = Number($item.attr("data-height"));
if (!width || !height){
var $img=$item.find("img:first");
width = $img.width();
height = $img.height();
$item.attr("data-width", width);
$item.attr("data-height", height);
}
space_width = $item.outerWidth(true) - $item.width();
space_height = $item.outerHeight(true) - $item.height();
if(temps.length<minimum || row_width<view_width){
temps.push($item);
if(row_width>0 && row_height>0){
if(row_height>height){
row_width=row_width*(height/row_height)+width;
row_height=height;
}else{
row_width=row_width+width*(row_height/height);
}
row_space+=space_width;
}else{
row_space=space_width;
row_width=width;
row_height=height;
}
}
if(temps.length>=minimum && row_width>=view_width || length<=0){
row_height*=(view_width-row_space)/row_width;
while(temps.length){
$item=temps.shift();
width = Number($item.attr("data-width"));
height = Number($item.attr("data-height"));
$item.width(width*row_height/height);
}
row_space=0;
row_width=0;
row_height=0;
}
});
}
}
以下是DIV基礎結構，其中最重要的是<div class="photo"><img></div> 其餘的是為了展示網頁的附屬品。
<div class="view" id="view">
<div class="photo">
<a href="http://www.teyua.com/photo_view.jsp?id=2701be21-f048-11e4-a92c-00163e003797" target="_blank" rel="external nofollow" target="_blank" title="點選檢視高清大圖"><img src="photos/2015/26E911E5ET.jpg" alt="小心-狗寄養"/></a>
<span><a href="http://www.teyua.com/photo_pet.jsp?id=fca783ce-0e53-4e0f-b2bf-5f90e3d9bb6b" target="_blank" rel="external nofollow" target="_blank" title="浏覽它的所有照片">小心</a></span>
<span>2015-05-02</span>
</div>
<div class="photo"> <a href="http://www.teyua.com/photo_view.jsp?id=4ee1f4cc-f03e-11e4-a92c-00163e003797" target="_blank" rel="external nofollow" target="_blank" title="點選檢視高清大圖"><img src="photos/2015/26E509946T.jpg" alt="圓圓-狗看養"/></a> <span><a href="http://www.teyua.com/photo_pet.jsp?id=adb0c316-8b6a-4ece-9373-2bcadaae0e7a" target="_blank" rel="external nofollow" target="_blank" title="浏覽它的所有照片">圓圓</a></span> <span>2015-04-11</span> </div>
</div>
歡迎各位界面愛好者共同探讨，請檢視效果 實際效果請看http://www.teyua.com/photo.jsp
如果有更多的優化也請分享給大家。