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

Question

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

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

为了获得最佳外观布局,绝对需要试验和错误.

最大的专辑封面似乎是500像素,API中最小的是75,选择正确的列宽帮助.我目前正在使用75但50可能效果更好.我只是想添加图像来完成这项小实验.

我想尝试类似于将更多图像添加到底部的技术.我想添加更多专辑封面,我使用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值和宽度item。Masonry 将元素与最适合的列优先布局对齐。它适用于数学方程。因此，完美的砖墙配件只是假设的理想情况。我对 firebug 和其他工具进行了几次尝试，才使砌体能够以理想的布局工作。关键是要获取 columnWidth 和 width、gutter 等的值，以便以良好的值求解逻辑方程。

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

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