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

我读到了关于Masonry的文章，在未能获得图像后，建议切换到后续的同位素。我试图改进或创建专辑封面库的变体，在使用相同的PHP类之前，我已经做过一两次了。

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

要获得最佳布局，肯定需要反复试验

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

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

我已经多次更改CSS规则，现在我只使用了同位素作者建议的默认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会生成DIV As和IMG标记。我真的不确定我做错了什么，反复阅读文档并不能解决问题。我从来都不是一个真正的JavaScript爱好者。我甚至不是一个PHP的家伙，这似乎是对的，但尽管提供了慷慨的援助和赏金，我还是一再努力让它成功。

谢谢你的帮助。

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