7

我阅读了有关 Masonry 的信息，并在未能将图像附加到工作后被建议切换到继任者 Isotope。我试图改进或创建专辑封面画廊的变体，在使用相同的 PHP 类之前我已经做过一次或两次。

我可以使基本功能正常工作，但是单击以添加更多图像的按钮始终无法正常工作。我一直在阅读 jQuery 文档，并且尝试了各种 JavaScript 调试器，但是当我单击时，我的图库中总是没有添加任何图像。

要获得最好看的布局，肯定需要反复试验。

最大的专辑封面似乎是 500 像素，在 API 中发现的最小的是 75，选择正确的列宽会有所帮助。我目前正在使用 75，但 50 可能效果更好。我只想让添加图像工作并完成这个小实验。

我想尝试类似于这种将更多图像附加到底部的技术。我想使用 PHP 附加更多从各种 API（Amazon Product API、Last.fm、iTunes）获取的专辑封面。所有专辑封面都来自 API，我使用 PHP 来查找给定专辑标题和艺术家的 URL。我的代码正在运行： http: //www.muschamp.ca/Muskie/cdCoverGalleryV4.php

我已经多次更改 CSS 规则，现在我只有 Isotope 作者建议的默认 CSS。

循环生成 10 个 div 的 PHP 代码，每个 div 一个图像

$myAlbumCollection->randomMember();
    $count = 0;
    print('<div id="container">');

    while ( $count < 10 )
    {
        // Check that current album is in Amazon 
        $buyLink = $myAlbumCollection->currentAlbumAmazonProductURL();
        $imageURL = $myAlbumCollection->currentAlbumRandomImageURL();
        if ( (strcmp($buyLink, '#') != 0) && (strcmp($imageURL, myInfo::MISSING_COVER_URL) != 0))
        {
            $count++;
            print('<div class="item">'); 
            print('<a href="' . $buyLink . '">');
            print('<img src="' . $imageURL . '" />');
            print('</a>');
            print('</div>');
        }
        $myAlbumCollection->goToNextAlbum(); // This could loop forever if it doesn't find enough album covers, but in reality will timeout 
    }
    print('</div>');

最后这里是 javascript，最后一个问题在这里的某个地方：

<script>
$(function(){

  var $container = $('#container');


  $('#insert a').click(function(){
    var $newEls = $.get('./moreAlbumCovers.php');
    $container.isotope( 'insert', $newEls );

    return false;
  });

  $container.isotope({
    itemSelector: '.item',
    masonry: {
    columnWidth: 75
    }
  });

});
</script>

单击该链接时会调用该链接，我已经完成了它。PHP 生成 DIV As 和 IMG 标签。我真的不确定我做错了什么，反复阅读文档并没有解决它。我从来都不是真正的 JavaScript 人。我什至不是 PHP 人，这似乎是正确的，但尽管提供了慷慨的帮助并提供了赏金，但反复努力使其成功却失败了。

谢谢您的帮助。

4

4 回答 4

4

尝试调整 的columnWidh值和宽度item。砌体将元素与最适合的列优先布局对齐。它适用于数学方程。因此，完美的砖墙配件只是假设的理想情况。我花了一些时间尝试使用萤火虫和其他工具，才能让砌体以理想的布局工作。关键是要获得 columnWidth 和 width、gutter 等的值，以便以良好的值求解逻辑方程。

:: 编辑 ::
我发现一个链接保存在我的口袋页面中，我完全忘记了。这是一个很棒的教程。所以我回来给它。推荐给在开始使用此插件时遇到困难的每个人。

http://www.netmagazine.com/tutorials/get-started-jquery-masonry

于 2013-02-22T19:18:44.890 回答
3

砌体不是一个非常具有描述性的名称。事实上，这是一个优化问题。这就是所谓的 np 问题，因为要检查的排列太多。特别是 masonry jquery 插件是一个 1d bin-packing 求解器，它将砖块排列在垂直列中。默认情况下，CSS 按水平顺序排列砖块。换句话说，它是一种深度优先的相邻树模型。

更新：尝试将砖石添加到您的虚拟 div 并删除其他所有内容：

           $('#dummy').load('./moreAlbumCovers.php').masonry("reload");

我觉得你想多了。该变量为空，因为您将其分配给了 dom 对象。它很可能也成为一个对象并且没有用。

于 2013-02-23T18:45:56.023 回答
3

这里很好地解释了Jquery Masonry 无缝响应图像网格+ 我会尝试对同位素做同样的事情http://isotope.metafizzy.co/

编辑： 我认为同位素和砖石只是整理出一维装箱，而您可能要照顾的是二维装箱

像这样http://codeincomplete.com/posts/2011/5/7/bin_packing/example/（检查复杂的情况，它完全适合所有盒子）

和lib https://github.com/jakesgordon/bin-packing/

于 2013-03-07T01:59:57.793 回答
2

要获得更像砖墙的效果，您无需使用 CSS 设置项目宽度。鉴于此处的说明，这并不十分清楚。但是很多测试似乎表明，只指定一个 columnWidth，然后让浏览器和 javascript 做到最好，这样就更接近我正在寻找的性能。将不得不调整并最终尝试附加......

于 2013-02-22T20:14:58.547 回答