Использование масонства, jQuery и PHP для создания галереи обложки альбома

Question

Я прочитал о масонстве и после того, как не получил изображение, добавляющее к работе, было рекомендовано переключиться на преемника Isotope. Я пытался улучшить или создать вариации в галерее обложки альбома, что-то, что я сделал один или два раза, прежде чем использовать одни и те же классы PHP.

Я могу использовать базовые функции, но кнопка для добавления большего количества изображений всегда не срабатывала. Я продолжаю читать документацию по jQuery, и я пробовал различные отладчики JavaScript, но я всегда получаю без добавления изображений в мою галерею, когда я нажимаю.

Судебная и ошибка, безусловно, требуется для получения наилучшего вида макета.

Самая большая обложка альбома, по-видимому, составляет 500 пикселей, а наименьшее количество найденных в API - 75, выбор правой ширины столбца помогает. В настоящее время я использую 75, но 50 могли бы работать лучше. Я просто хочу добавить изображения к работе и сделать это с помощью небольшого эксперимента.

Я хотел попробовать что-то похожее на это technique of appending more images to the bottom. Я хочу добавить больше обложек альбомов, которые я получаю из различных API (Amazon Product API, Last.fm, iTunes) с использованием PHP. Все обложки альбомов взяты из API, и я использую PHP, чтобы найти URL-адреса с названием альбома и исполнителем. Мой код запущен: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php

Я изменил правило CSS много раз, теперь у меня есть CSS по умолчанию, предложенный автором Isotope.

PHP код, который петлями и производит 10 дивы с одного изображения на 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

Попробуйте установить значение и ширину columnWidhitem. Масонство выравнивает элемент с наиболее подходящим столбцом первой компоновки. Он работает над математическими уравнениями. Таким образом, идеальная, кирпичная стяжка - это всего лишь гипотетический идеальный случай. Мне нужно несколько попыток на firebug и других инструментах, чтобы заставить кладовую работать с идеально подходящим макетом. Ключ состоит в том, чтобы получить значение ширины столбца, ширины, желоба и т. Д. Таким образом, чтобы он решал логические уравнения в хороших значениях.

:: EDIT ::
Я нашел ссылку, сохраненную в моей странице карманы, из которых я совершенно забыл о. Это отличный учебник. Поэтому я вернулся, чтобы дать его здесь. Рекомендуется всем, у кого есть проблемы с запуском этого плагина.

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

Answer 2

Чтобы получить больше кирпичную стену, как эффект не установлен в ширину элемента с помощью CSS. Это было не кристально ясно, учитывая the instructions here. Но многие тесты, похоже, указывают на то, что просто указывая ширину столбца, а затем позволяя браузеру и javascript лучше всего приближаться к производительности, которую я ищу.Необходимо будет настроить и в конечном итоге попробовать добавить ...

Answer 3

Масонство - не очень описательное название. На самом деле это проблема оптимизации. Это то, что называется проблемой np, потому что слишком много перестановок для проверки. Особенно плагин jquery для кладки - это 1-й дешифратор для упаковки в бутылки, и он размещает кирпичи в вертикальных колоннах. Css по умолчанию расположить кирпичи в горизонтальном порядке. Другими словами, это тип глубины соседней древовидной структуры.

Обновление: Попробуйте добавить кладку в свой манекен DIV и удалить Everthing еще:

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

Я думаю, что вы overthink его. Переменная пуста, потому что вы назначаете ее объекту dom. Скорее всего, это тоже объект, а не полезный.

Answer 4

Это Релли хорошо объяснено здесь Jquery Masonry Seamless Responsive Image Grid + я бы попытаться сделать то же самое с изотопом http://isotope.metafizzy.co/

редактировать: Я думаю isoptope и кладка просто перебирая 1 мерную бен упаковку, и что вы, возможно, глядя после того, как 2 мерных бин упаковки

как это http://codeincomplete.com/posts/2011/5/7/bin_packing/example/ (проверить сложный случай он подходит все коробки в совершенстве)

и Лив для этого https://github.com/jakesgordon/bin-packing/