请高手解决下一下问题，会有报酬

Question

http://i.ys2o.com/gallery-grid/images.json
把上面的json数据直接写入程序并成功运行var GPlusGallery = (function($) { /* ------------ PRIVATE functions ------------ */ /** Utility function that returns a value or the defaultvalue if the value is null */
var $nz = function(value, defaultvalue) {
if( typeof (value) === undefined || value == null) {
return defaultvalue;
}
return value;
};

/**
 * Distribute a delta (integer value) to n items based on
 * the size (width) of the items thumbnails.
 * 
 * @method calculateCutOff
 * @property len the sum of the width of all thumbnails
 * @property delta the delta (integer number) to be distributed
 * @property items an array with items of one row
 */
var calculateCutOff = function(len, delta, items) {
// resulting distribution
var cutoff = [];
var cutsum = 0; // distribute the delta based on the proportion of
// thumbnail size to length of all thumbnails.
for(var i in items) {
var item = items[i];
var fractOfLen = item.twidth / len;
cutoff[i] = Math.floor(fractOfLen * delta);
cutsum += cutoff[i];
} // still more pixel to distribute because of decimal
// fractions that were omitted.
var stillToCutOff = delta - cutsum;
while(stillToCutOff > 0) {
for(i in cutoff) {
// distribute pixels evenly until done
cutoff[i]++;
stillToCutOff--;
if (stillToCutOff == 0) break;
}
}
return cutoff;
};

/**
 * Takes images from the items array (removes them) as 
 * long as they fit into a width of maxwidth pixels.
 *
 * @method buildImageRow
 */
var buildImageRow = function(maxwidth, items) {
var row = [], len = 0;

// each image a has a 3px margin, i.e. it takes 6px additional space
var marginsOfImage = 12; // Build a row of images until longer than maxwidth
while(items.length > 0 && len < maxwidth) {
var item = items.shift();
row.push(item);
len += (item.twidth + marginsOfImage);
} // calculate by how many pixels too long?
var delta = len - maxwidth; // if the line is too long, make images smaller
if(row.length > 0 && delta > 0) { // calculate the distribution to each image in the row
var cutoff = calculateCutOff(len, delta, row); for(var i in row) {
var pixelsToRemove = cutoff[i];
item = row[i]; // move the left border inwards by half the pixels
item.vx = Math.floor(pixelsToRemove / 2); // shrink the width of the image by pixelsToRemove
item.vwidth = item.twidth - pixelsToRemove;
}
} else {
// all images fit in the row, set vx and vwidth
for(var i in row) {
item = row[i];
item.vx = 0;
item.vwidth = item.twidth;
}
} return row;
};

/**
 * Creates a new thumbail in the image area. An attaches a fade in animation
 * to the image. 
 */
var createImageElement = function(parent, item) {
var imageContainer = $('<div class="imageContainer"/>'); var overflow = $("<div/>");
overflow.css("width", ""+$nz(item.vwidth, 200)+"px");
overflow.css("height", ""+$nz(item.theight, 200)+"px");
overflow.css("overflow", "hidden"); var link = $('<a class="viewImageAction" href="#"/>');
link.click(function() {
alert("clicked");
return false;
});

var img = $("<img/>");
img.attr("src", item.thumbUrl);
img.attr("title", item.title);
img.css("width", "" + $nz(item.twidth, 200) + "px");
img.css("height", "" + $nz(item.theight, 200) + "px");
img.css("margin-left", "" + (item.vx ? (-item.vx) : 0) + "px");
img.css("margin-top", "" + 0 + "px");
img.hide(); link.append(img);
overflow.append(link);
imageContainer.append(overflow); // fade in the image after load
img.bind("load", function () { 
$(this).fadeIn(500); 
}); parent.find(".clearfix").before(imageContainer);
item.el = imageContainer;
return imageContainer;
};

/**
 * Updates an exisiting tthumbnail in the image area. 
 */
var updateImageElement = function(item) {
var overflow = item.el.find("div:first");
var img = overflow.find("img:first"); overflow.css("width", "" + $nz(item.vwidth, 200) + "px");
overflow.css("height", "" + $nz(item.theight, 200) + "px"); img.css("margin-left", "" + (item.vx ? (-item.vx) : 0) + "px");
img.css("margin-top", "" + 0 + "px");
};

/* ------------ PUBLIC functions ------------ */
return {

showImages : function(imageContainer, realItems) { // reduce width by 1px due to layout problem in IE
var containerWidth = imageContainer.width() - 1;

// Make a copy of the array
var items = realItems.slice();

// calculate rows of images which each row fitting into
// the specified windowWidth.
var rows = [];
while(items.length > 0) {
rows.push(buildImageRow(containerWidth, items));
}   for(var r in rows) {
for(var i in rows[r]) {
var item = rows[r][i];
if(item.el) {
// this image is already on the screen, update it
updateImageElement(item);
} else {
// create this image
createImageElement(imageContainer, item);
}
}
}
} }
})(jQuery);
 $(document).ready(function() {
  $.getJSON('images.json', function(data) {
  var items = data.thumbs;
  
  GPlusGallery.showImages($("#imagearea"), items);
  
  $(window).resize(function() {
  // layout the images with new width
  GPlusGallery.showImages($("#imagearea"), items);
  });  
// could be used for loading aditional images on scrolling
$(window).scroll(function() {
if  ($(window).scrollTop() + $(window).height() > $(document).height() - 200){
}
});   });
  });html代码<div id="imagearea">
  <span class="clearfix"></span>
</div>

Answer 1

上面的问题由于刚才在上班，由于时间关系我没有说清楚，再次重新整理下。
前两天弄到了一个google图片搜索排版样式，也就是横向瀑布流图墙。
Demo
这个是给出了图片高度
图片左右自动填充对齐
图片随着窗口变化而自动缩放排序。用jq和json数据完成的
但是他这个是把json数据保存为文件然后调用。
我是想请哪位高手帮忙修改下。
在js中直接写入直接写入json数据。
我的数据格是是php生成的。
例如这篇文章。http://www.ys2o.com/media/rose-ladyboy-201212221187.html
查看源文件里面就有json数据。
文件的格式像这样
json数据格式是可以修改的。
{
    "thumbs": [
        {
            "thumbUrl": "http://img.ys2o.com/w/c/u//4dd411ef4363-156x200.jpg", 
            "fullUrl": "http://img.ys2o.com/w/c/u//4dd411ef4363.jpg", 
            "width": 565, 
            "height": 720, 
            "imgTitle": "1_最美人妖_LadyBoys_Rose", 
            "attachmentPage": "http://www.ys2o.com/media/rose-ladyboy-201212221187.html/attachment/1_%e6%9c%80%e7%be%8e%e4%ba%ba%e5%a6%96_ladyboys_rose"
        }, 
        {
            "thumbUrl": "http://img.ys2o.com/w/c/u//6206638f705b-140x200.jpg", 
            "fullUrl": "http://img.ys2o.com/w/c/u//6206638f705b.jpg", 
            "width": 469, 
            "height": 670, 
            "imgTitle": "21_最美人妖_LadyBoys_Rose", 
            "attachmentPage": "http://www.ys2o.com/media/rose-ladyboy-201212221187.html/attachment/21_%e6%9c%80%e7%be%8e%e4%ba%ba%e5%a6%96_ladyboys_rose"
        }, 
        {
            "thumbUrl": "http://img.ys2o.com/w/c/u//0ae953adb5ef-150x200.jpg", 
            "fullUrl": "http://img.ys2o.com/w/c/u//0ae953adb5ef.jpg", 
            "width": 540, 
            "height": 720, 
            "imgTitle": "33_最美人妖_LadyBoys_Rose", 
            "attachmentPage": "http://www.ys2o.com/media/rose-ladyboy-201212221187.html/attachment/33_%e6%9c%80%e7%be%8e%e4%ba%ba%e5%a6%96_ladyboys_rose"
        },         {
            "thumbUrl": "http://img.ys2o.com/w/c/u//20121206115640917-210x315.jpg", 
            "fullUrl": "http://img.ys2o.com/w/c/u//20121206115640917.jpg", 
            "width": 133, 
            "height": 200, 
            "imgTitle": "beautyleg-254-001", 
            "attachmentPage": "'http://www.ys2o.com'"
        }
    ]
}还有原始的程序的图片链接是没有的。我想让图片链接到数据中给出的"attachmentPage":的值，在新窗口打开。谢谢！~！PS：如果以上的内容修改起来很麻烦的话，我愿意负一定费用。