【问题标题】：JQuery Masonry not workingJQuery砌体不工作
【发布时间】：2013-12-26 09:50:28
【问题描述】：

我在 JSFiddler 中发布了代码：

我似乎无法让它工作。我曾经遇到过类似的问题，但解决方案只是一个愚蠢的自关闭脚本标签。但我似乎无法找到这段代码有什么问题。

另外，我将如何使用砖石将底部 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>

【问题讨论】：

标签： javascript jquery jquery-masonry

【解决方案1】：

好吧，经过一番摆弄，我认为我已经设法解决了你的问题。首先，对您的代码进行一些整理... ;)

原小提琴的一些问题：

Masonry.js 没有链接——你应该链接一个外部托管的 JS 文件，我使用了CDN-hosted 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 中声明的宽度包括内边距（您已使用10 像素）。

对于您的 JS，只需选择左侧面板上的 onLoad。您不必再次使用$(window).load(function(){...} 包装它，因为它已经为您完成了。因此，对于您的 JS，只需使用：

$('#main').masonry({
    itemSelector: '.blob'
});

真的，就是这么简单！ 对于您的 CSS，我做了一些更改 - 查看下面链接的新小提琴。上面我的回答中已经描述了这些变化。

这是您的 Fiddle 的一个工作示例：http://jsfiddle.net/teddyrised/xWWG8/12/

其他说明

注意：您可能想研究一些 jQuery 驱动的选项来处理调整 iframe 和其他嵌入内容的大小，因为从我的（部分）固定解决方案中可以明显看出，您的嵌入 YouTube 视频是溢出。为此，我建议实施 Chris Coiyer 的 FitVid.js。

关于您的 CSS 文件中注释掉 float 属性的注释，因为它会导致父级折叠，当您浮动其任何子级时，只需在 .blob 上使用 overflow: hidden。

【讨论】：