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

[divachen]

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>

[divachen]

上面的问题由于刚才在上班，由于时间关系我没有说清楚，再次重新整理下。 前两天弄到了一个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：如果以上的内容修改起来很麻烦的话，我愿意负一定费用。

[hch126163]

只看到 一大段代码。没看到 问题描述