【问题标题】:Using Masonry, jQuery, and PHP to make an album cover gallery使用 Masonry、jQuery 和 PHP 制作专辑封面画廊
【发布时间】:2013-02-07 03:45:47
【问题描述】:

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

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

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

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

我想尝试类似technique of appending more images to the bottom 的东西。我想使用 PHP 附加更多从各种 API(Amazon Product API、Last.fm、iTunes)获取的专辑封面。所有专辑封面都来自 API,我使用 PHP 来查找给定专辑标题和艺术家的 URL。我的代码正在运行:http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php

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

循环生成 10 个 div,每个 div 一张图片的 PHP 代码

$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 人,这似乎是正确的,但尽管提供了慷慨的帮助并提供了赏金,但多次努力使其成功却失败了。

感谢您的帮助。

【问题讨论】:

  • 嗨,马斯基,您能澄清一下您的具体问题是什么吗?
  • 这样更清楚吗?基本上代码可以做一些事情,但不是我当前设置的砖墙效果。最终我也想加入工作。
  • 我继续阅读此处的说明:masonry.desandro.com/demos/basic-multi-column.html 并更改项目宽度 CSS 条目和 columnWidth javascript 参数,我的浏览器中不断出现两列和大量空白...
  • 在其他答案stackoverflow.com/questions/12115037/…中解释得很好
  • 今晚晚些时候我可以尝试切换到同位素。从客户端调用它们非常相似,我仍然没有 jQuery 和 PHP 交互。我很感激帮助。我不知道为什么这个问题被证明如此顽固。

标签: php javascript jquery jquery-masonry jquery-isotope


【解决方案1】:

这里解释得很好Jquery Masonry Seamless Responsive Image Grid + 我会尝试对同位素做同样的事情http://isotope.metafizzy.co/

编辑: 我认为同位素和砌体只是整理出一维装箱,而您可能要关注的是二维装箱

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

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

【讨论】:

  • 所以您的建议是切换到同位素或另一种 Javascript?我仍然认为我正在尝试做的事情可以通过 Masonry 来完成,它似乎适合示例并且与 Pinterest 的布局没有什么不同。 Pinterest 的所有盒子都有相同的宽度,只是高度不同。虽然我知道最大和最小尺寸是多少,但我得到的是随机尺寸的图像。
  • 由于列宽不固定,您的问题与 pinterest 非常不同。您可以尝试拥有 1x 2x 4x 宽度(使用 2 的幂可能会起作用),否则不会后悔。我在想现在尝试同位素会得到完全相同的结果(抱歉),bin_packing 可以工作,但可能需要更多的集成,并且 bin_packing 库首先适合最大的盒子,这也可能不是你想要的。如果您想归档类似于 pinterest 的内容,请将列宽设置为一个值,并且只进行一些高度操作。你可以调整图片的大小并且只有一个宽度。
  • 我不需要完美,我只是想找到一种新的、令人兴奋的方式来展示我的唱片收藏。我从各种 API(Amazon、Last.fm、iTunes 等)获取所有专辑封面,因此它们各自使用的大小略有不同。我可以强制浏览器调整它们的大小,或者我可以使用 PHP 自己调整它们的大小,但这只会减慢速度……感谢您的帮助。我很快就会重新审视它。
【解决方案2】:

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

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

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

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

【讨论】:

  • 谢谢,我想我需要了解更多关于 jQuery 和 JavaScript 的知识来解决这个问题,或者我完全没有附加信息。我知道砌体并不完美,我正在尽其所能从 API 中为其提供随机大小的图像。要获得正确的宽度,需要进行一定程度的反复试验。
  • 我只添加了#dummy div,因为我无法在容器上调用负载...我会试试这个,但它似乎不会追加,而是它将我的网格替换为不同的网格...
  • 奇怪,它不太管用...我点击按钮,什么也没有,但是当我用浏览器刷新时,顶部会出现另外 5 个 CD 封面,它们进入空白 # dummy div 这是什么,但我希望将它们附加到容器中......我将不得不再次考虑并查阅文档。谢谢。
【解决方案3】:

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

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

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

【讨论】:

  • 我尝试了很多值,但我开始看到我所期望的行为,因为我的 CSS 规则中没有项目宽度,我必须在与您的答案大约相同的时间输入,尽管也许我57分钟后。 ;-)
  • 谢谢,我会查看链接。我仍然不明白如何追加。
  • 追加什么??砌体网站上有一个添加新元素的演示。
  • 我正在尝试添加专辑封面,您是否转到了我正在运行的代码的链接。附加演示调用了另一个 javascript,它可以即时制作盒子。我需要修改它以调用从 API 获取专辑封面图像的 PHP...
  • 在 chrome 开发工具和 fireflow (firefox) 上试过。问题是单击按钮时没有任何反应。尝试在脚本中使用 jquery bind() 而不是 click()。或者,如果您首先尝试老式的&lt;button id="append" onclick="append()"&gt; 只是为了看看绑定是问题还是请求的其他问题,那就更好了。
【解决方案4】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-10
    相关资源
    最近更新 更多