7

組積造について読みましたが、画像の追加に失敗した後、後継のアイソトープに切り替えるようにアドバイスされました。アルバムカバーギャラリーのバリエーションを改善または作成しようとしていました。これは、同じPHPクラスを使用する前に1〜2回行ったことです。

基本的な機能を動作させることはできますが、クリックして画像を追加するボタンが常に機能しませんでした。jQueryのドキュメントを読み続け、さまざまなJavaScriptデバッガーを試しましたが、クリックしてもギャラリーに画像が追加されないことがあります。

見栄えの良いレイアウトを得るには、試行錯誤が必要です。

最大のアルバムカバーは500ピクセルのようで、APIで見つかった最小のアルバムは75ピクセルでした。適切な列幅を選択すると、役立ちます。私は現在75を使用していますが、50の方がうまくいったかもしれません。画像を追加して機能させ、この小さな実験で完了させたいだけです。

下部にさらに画像を追加するこの手法に似たものを試してみたかったのです。PHPを使用してさまざまなAPI（Amazon Product API、Last.fm、iTunes）から取得したアルバムカバーをさらに追加したいと思います。アルバムカバーはすべてAPIからのものであり、PHPを使用してアルバムタイトルとアーティストに指定されたURLを検索します。私のコードは実行されています：http ：//www.muschamp.ca/Muskie/cdCoverGalleryV4.php

CSSルールを何度も変更しましたが、Isotopeの作成者によって提案されたデフォルトのCSSがあります。

ループして、divごとに1つの画像で10divを生成する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は、DIVAsおよびIMGタグを生成します。何が間違っているのかよくわかりません。ドキュメントを繰り返し読んでも問題は解決しません。私は実際にJavaScriptの男になったことがありません。私はPHPの人でもありません。それは正しいようですが、寛大な支援と報奨金の提供にもかかわらず、それを実現するための繰り返しの努力は失敗しました。

助けてくれてありがとう。

4

4 に答える 4

3

組積造は、それを表す名前ではありません。実際、それは最適化問題です。順列が多すぎてチェックできないため、これはnp問題と呼ばれるものです。特に石積みのjqueryプラグインは、1次元のビンパッキングソルバーであり、レンガを垂直の列に配置します。Cssは、デフォルトでレンガを水平方向に配置します。言い換えれば、これは深さ優先の隣接ツリーモデルです。

更新：ダミーのdivに石積みを追加して、他のすべてを削除してみてください。

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

私はあなたがそれを考えすぎていると思います。変数をdomオブジェクトに割り当てるため、変数は空です。それはおそらくオブジェクトにもなり、役に立たなくなります。

于 2013-02-23T18:45:56.023 に答える
3

ここで十分に説明されていますJquery Masonry シームレスなレスポンシブ画像グリッド+ 私は同位体http://isotope.metafizzy.co/でまったく同じことをしようとします

編集： アイソトープと石積みは1次元のビンパッキングを整理しているだけだと思います。おそらくあなたが見ているのは2次元のビンパッキングです

このhttp://codeincomplete.com/posts/2011/5/7/bin_packing/example/のように（すべてのボックスに完全に適合する複雑なケースをチェックしてください）

そのためのlib https://github.com/jakesgordon/bin-packing/

于 2013-03-07T01:59:57.793 に答える