Question

我读到了关于砌体的事情，并且在未能将图像附加到工作后，建议切换到继承人Isotope。我试图在专辑封面库中改进或创建变体，这是我在使用相同的PHP类之前做过一两次的事情。

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

获得最佳外观布局肯定需要试用和错误。

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

我想尝试类似于此technique of appending more images to the bottom的内容。我想添加更多专辑封面，我使用PHP从各种API（亚马逊产品API，Last.fm，iTunes）获取。所有专辑封面都来自API，我使用PHP查找给定专辑标题和艺术家的URL。我的代码正在运行：http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php

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

PHP代码循环并生成10个div，每个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生成DIVs As和IMG标签。我真的不确定我做错了什么，重复阅读文档并没有解决它。我从来都不是一个JavaScript家伙。我甚至都不是一个PHP家伙，看起来是正确的，但是尽管慷慨的帮助并提供了赏金，但是反复努力才能让它失败。

感谢您的帮助。

Answer 1

尝试调整columnWidh的{{1}}值和宽度。砌体将元素与最佳拟合列第一布局对齐。它适用于数学方程。因此，完美的砖墙配件只是假设的理想情况。我需要尝试使用萤火虫和其他工具来使砖石工作，并采用理想的布局。关键是要获得columnWidth和width，gutter等的值，使其能够以良好的值求解逻辑方程。

::编辑::
我在口袋页面找到了一个链接，其中我完全忘了。这是一个很棒的教程。所以我回来把它放在这里。建议所有使用此插件时遇到问题的人。

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

Answer 2

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

更新：尝试将砌体添加到您的虚拟div并删除其他内容：

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

我认为你是在思考它。该变量为空，因为您将其分配给dom对象。它很可能也成为一个对象而无用。

Answer 3

这里有很好的解释Jquery Masonry Seamless Responsive Image Grid +我会尝试用同位素http://isotope.metafizzy.co/

做同样的事情

修改我认为isoptope和砌体只是整理出1维垃圾箱包装，你可能正在照看的是2维垃圾箱包装

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

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

Answer 4

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

使用Masonry，jQuery和PHP制作专辑封面库

4 个答案: