我在JSFiddler中发布了代码：
http://jsfiddle.net/xWWG8/
我似乎无法让它发挥作用。我曾经遇到过类似的问题，但解决方案只是一个愚蠢的自我关闭脚本标签。但我似乎就是找不出这个代码有什么问题。
此外，我如何使用砖石将底部div(文本为"here is some…"的div)移动到其他2个div的右侧？
<%@ Page Title="" Language="C#" MasterPageFile="~/NCMaster.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="cntHeader" ContentPlaceHolderID="head" runat="server">
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/modernizr-2.7.1.js"></script>
<script>
$(window).load(function () {
var columns = 2, setColumns = function () { columns = $(window).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);
$('#main').masonry({ itemSelector: '.blob', columnWidth: function (containerWidth) { return containerWidth / columns; } });
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="main">
<div class="blob">
<p class="body-text">What good is a race if you dont finish in style :)
</p>
</div><br />
<div class="blob">
<div class="test">Test</div>
<div class="test">Test</div>
<div class="test">Test</div>
<iframe src="//www.youtube.com/embed/NHPaXjJgzXo" frameborder="0" allowfullscreen="true" class="media"></iframe>
<iframe width="75" height="75" src="//www.youtube.com/embed/NHPaXjJgzXo" frameborder="0" allowfullscreen="true" class="media"></iframe>
<iframe width="75" height="75" src="//www.youtube.com/embed/NHPaXjJgzXo" frameborder="0" allowfullscreen="true" class="media"></iframe>
</div>
<div class="blob">
Here is some more text. I am trying to get this blob in to a new column on the right o0f the other 2 blobs
</div>
</div>
</asp:Content>
好吧，经过一番摆弄，我认为我已经解决了你的问题。首先，对代码进行一些内务处理…；)
原始小提琴的一些问题：
- Masonry.js未链接—你应该链接一个外部托管的JS文件，我使用了一个CDN托管的Masonry(v3.1.2)
- jQuery库未加载。记得加载
- 您正在嵌套两个
$(window).load函数，因为JSFiddle会自动为您包装它 containerWidth不是已声明的变量
建议改进
您似乎正在尝试使用父容器宽度来计算基于屏幕大小的列数。我为您提供一个更好的解决方案：
- 通过调整
.blob的宽度，通过基于CSS媒体查询和mash的屏幕分辨率来确定列数；如果需要3列，请将宽度设置为33.33333%。2列，可以使用50%等 - 从
#main中删除5px填充，因为它会干扰百分比计算 - 在
.blob子级上声明box-sizing: border-box，以便在CSS中声明的宽度包括填充(您已经使用了10px)
对于JS，只需在左侧面板上选择onLoad。你不必再用$(window).load(function(){...}包装它，因为它已经为你完成了。因此，对于您的JS，只需使用：
$('#main').masonry({
itemSelector: '.blob'
});
真的，就这么简单对于你的CSS，我做了一些更改-查看下面链接的新fiddle。我在前面的回答中已经描述了这些变化。
以下是Fiddle的一个工作示例：http://jsfiddle.net/teddyrised/xWWG8/12/
其他注意事项
注意：您可能需要研究一些jQuery支持的选项，以处理调整iframe和其他嵌入式内容的大小，因为从我的(部分)固定解决方案中可以明显看出，您的嵌入式YouTube视频正在溢出。为此，我建议实现Chris Coiyer的FitVid.js。
对于CSS文件中的一个注释，该注释注释掉了float属性，因为它会导致父级崩溃，当您浮动其任何子级时，只需在.blob上使用overflow: hidden即可。