我读到了关于砌体的事情,并且在未能将图像附加到工作后,建议切换到继承人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.
$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家伙,看起来是正确的,但是尽管慷慨的帮助和提供赏金,但是反复努力使它成功.
谢谢您的帮助.
解决方法
尝试调整itemWidh值和项的宽度.砌体将元素与最佳拟合列第一布局对齐.它适用于数学方程.因此,完美的砖墙配件只是假设的理想情况.我花了几次尝试使用firebug和其他工具来让砌体与理想的布局配合工作.关键是获得columnWidth和width,gutter等的值,以便它以良好的值解决逻辑方程.
::编辑::
我在口袋页面找到了一个链接,其中我完全忘了.这是一个很棒的教程.所以我回来把它放在这里.建议所有使用此插件时遇到问题的人.
http://www.netmagazine.com/tutorials/get-started-jquery-masonry