帮助Jquery / Masonry，小调整
对于我的生活，我可以;弄清楚到底发生了什么。 我缺乏Jquery知识可能与它有关…
看看这个： http ： //jsfiddle.net/ryanjay/fgNMJ/
当页面加载时，每张照片之间存在高度差异。 当您单击照片并展开时，底部的照片会重新放回原位。 再次单击照片以折叠照片时，照片会在页面加载时按原样放置。 合理？
当页面加载时，为什么照片之间会有高度差异？ 我假设它与（.box img）.css（）代码有关，我已经进行了…但我无法理解它。
这也是代码。
jQuery的：
$(document).ready(function(){ $('#grid').masonry({ singleMode: false, itemSelector: '.box', resizeable: true, animate: true }); $('.box img').css({ width: '100%', height: 'auto' }); $('.box').click(function(){ if ($(this).is('.expanded')){ restoreBoxes(); } else { $(this) // save original box size .data('size', [ $(this).width(), $(this).height() ]) .animate({ width: 400 }, function(){ $('#grid').masonry(); }); restoreBoxes(); $(this).addClass('expanded'); } function restoreBoxes(){ var len = $('.expanded').length - 1; $('.expanded').each(function(i){ var w = $(this).data('width'); $(this).animate({ width: ( w || '200' ) }, function(){ if (i >= len) { $('#grid').masonry(); } }) .removeClass('expanded'); }); } }); }); CSS：
.wrap { border: 0; width: 100%; } .box { float: left; font-size: 11px; width: 200px; margin: 0px; padding: 0px; display: inline; }
我想我修好了。
编辑： http ： //jsfiddle.net/fgNMJ/144/
去掉：
$('.box img').css({ width: '100%', height: 'auto' });
修改CSS
.box img{ width:100%; }
另一个编辑：你可以移动$('.box img').css...在masonry调用之上调用。