Perfect picture montage's JS effect based on jquery (multiple sizes of different images stitching into a wall of pictures)

Perfect picture montage's JS effect based on jquery (multiple sizes of different images stitching into a wall of pictures)

Recently developed a Pet service website http://www.teyua.com/There is a photo update column, need to implement this function.

A lot of references, including foreign pictures of the wall, is a number of different sizes of the picture according to an algorithm neat combination into the picture wall.

The functions that need to be implemented are: automatic stitching, perfect alignment at all ends, window size changes are automatically adjusted, and the final alignment is still perfect.

All the implementation found on the Internet, there are defects, including Baidu www.badu.com image search, the combination of pictures are defective, see, the right part of the red box, the edge is not aligned.

bing.cn Image Search Stitching image wall also has defects, and more serious than Baidu, please see the Middle red box, not aligned, there are differences.

The algorithm was calculated carefully because no perfect implementation was found. With the help of jquery, finally, the perfect realization, see. See http://www.teyua.com/photo.jsp for actual results

The following is the implementation code. There is only one method in total, which can be called. Montage (Id,minmun), the ID is the div ID inside the picture needs to be processed, minimun is to indicate that each line shows a minimum of several pictures.

And it only loops once, before there are three layers of nested loops, optimized to loop only once.

Photo Montage 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;// Line width High var space_width,space_height;//cannot scale space (Padding+margin+border) var width,height;//single internal width High (img) var $images = $ Container.children (); var length = $images. Total length;//, used to decrement//start loop processing $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;}    }); }}

The following is the DIV infrastructure, the most important of which is <div class= "Photo" ></div> the rest is to show the attachments of the Web page.

<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 "title=" Click to view HD big picture "></a> <span><a href=" http://www.teyua.com/photo_pet.jsp?id= fca783ce-0e53-4e0f-b2bf-5f90e3d9bb6b "target=" _blank "title=" Browse all of its photos "> Caution </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 "title=" Click to view HD big picture "></a> <span><a href=" http://www.teyua.com/photo_pet.jsp?id= adb0c316-8b6a-4ece-9373-2bcadaae0e7a "target=" _blank "title=" Browse all of its photos "> round </a></span> <span> 2015-04-11</span> </div> </div>

Welcome you to explore the interface enthusiasts, please see the effect of the actual results please see http://www.teyua.com/photo.jsp

If there are more optimizations, please share them with you.

Perfect picture montage's JS effect based on jquery (multiple sizes of different images stitching into a wall of pictures)