1

それは大きな挑戦になるでしょう。水平レイアウトを使用してhttps://myspace.com/で行ったのと同じように、サムネイル/ギャラリーを表示する方法についてです。上から下、左から右に浮いているように見えますが、ないことは知っfloat:topていますが、jQuery/Javascript でそのレイアウトを実現する方法があるかどうか疑問に思っていましたか? 以下の画像リンクを表示して、私が達成しようとしていることをよりよく理解してください。

モックアップ http://public.coco.com.au/empty-projects/columns/assets/img/mockup.png

だから私がこれまで試したのは.slice()、div .wrap 内の 2 つの li(s) ごとに、その div が残した flot です。それは一種の仕事をしましたが、画像が大きくなるとすぐに（suqare n6の例を参照）、ブレーキがかかります。

また、css3-webkit-transform: rotate(-90deg)を使用してコンテナー全体を回転させようとしましたが、ブラウザーのサイズ変更時に滑らかにスケーリングするには、サムネイルがパーセンテージを使用する必要があるため、機能しませんでした。

masonry という jQuery プラグインも使用しましたが、うまく機能しませんでした。

皆さん、助けてもらえますか? このレイアウトを機能させたいと思っています。

4

1 に答える 1

0

わかりましたので、私もこのレイアウトを理解しようとしていましたが、最も近いのは PHP/JAVASCRIPT を使用して構築することでした。

アイデアは、1) 1 つのサイズを使用して可能なすべての位置を構築し、配列することです。2) 次に、その配列を調べて、配列内の可能な位置にオープンとしてフラグを立てます。3) 次に、ポジションの新しいリストを実行し、空いているスポットを表示します。

これは私がこれまでに得たコードです。これにより、300px X 300px のボックスが生成され、配列内で指定した場所に 600 x 600 px のボックスが挿入されます。

これが役に立てば幸いです。これを改善する方法を見つけたら、投稿してください。

参考までに: 私はここに投稿するのが初めてで、コードを適切に投稿するのに問題があるようです。

配列：

            $mod[ 0 ] = array( 600 );
            $mod[ 1 ] = array( 300 );
            $mod[ 2 ] = array( 300 );
            $mod[ 3 ] = array( 300 );
            $mod[ 4 ] = array( 300 );
            $mod[ 5 ] = array( 300 );

PHP:

    define( 'XPOS', 0 );
    define( 'YPOS', 1 );
    define( 'WIDTH', 2 );

    $pos = array();
            $x = 0;
            $y = 0;
            $width = 300;
            for( $i = 0; $i < sizeof($mod); ++$i )
            {
                $width = $mod[$i][0];
                $shifted = $mod[$i][1];

                $pos[ $i ] = array( $x, $y, $width, $shifted );

                $y += 300;
                if( $y >= (300 * 3) )
                {
                    $x += 300;
                    $y = 0;
                }
            }   

            for( $i = 0; $i < sizeof($pos); ++$i )
            {
                if( $pos[$i][WIDTH] > 300 )
                {
                    $pos[$i +1][3] = 1;
                    $pos[$i +3][3] = 1;
                    $pos[$i +4][3] = 1;
                }
            }


            for( $i = 0; $i < sizeof($pos); ++$i )
            {
                if( $pos[$i][3] == 0 )
                {
                    echo 'X:' . $pos[$i][XPOS] . ' - Y:' . $pos[$i][YPOS] . ' - W:' . $pos[$i][WIDTH] . ' - S:' . $pos[$i][3] . '<br/>';
                    echo '<li class="collage-img" style="height:' . $pos[$i][WIDTH] . 'px;width:' . $pos[$i][WIDTH] . 'px;" data-xpos="'. $pos[$i][XPOS] .'" data-ypos="'. $pos[$i][YPOS] .'">' . $i . '</li>';
                }
            }

ジャバスクリプト:

    var counter = 0;
    $('.collage-list li').each(function(){

        var x = $(this).data( 'xpos' );
        var y = $(this).data( 'ypos' );

        $(this).css( 'position', 'absolute' );
        $(this).css( 'top', '0' );
        $(this).css( 'left', '0' );
        $(this).css( 'transform', 'translate('+ x +'px, '+ y +'px)' );
        $(this).css( '-webkit-transform', 'translate('+ x +'px, '+ y +'px)' );
        $(this).text( counter + ' - (X:' + x + ' Y:' + y + ')' );       

        counter++;
    });
于 2013-10-29T03:46:45.660 に答える