javascript - JQuery Masonry 不工作

Question

我在 JSFiddler 中发布了代码:

http://jsfiddle.net/xWWG8/

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

另外，我如何使用砌体将底部的 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>

Answer 1

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

原始 fiddle 的一些问题:

1. Masonry.js 没有链接——你应该链接一个外部托管的 JS 文件，我使用了 CDN-hosted Masonry (v3.1.2)
2. jQuery 库未加载。记得加载它
3. 你正在嵌套两个 $(window).load 函数，因为 JSFiddle 会自动为你包装它
4. 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 属性的注释，因为它会导致父级折叠，只需在 上使用 overflow: hidden。 blob 当你漂浮它的任何 child 时。