javascript - 如何使用 jQuery 从上到下 float div，就像 myspace.com 的新布局一样？

Question

所以这将是一个巨大的挑战。它是关于如何显示缩略图/图库，就像他们在 https://myspace.com/ 上所做的那样使用水平布局。看起来它们从上到下、从左到右浮动，我知道没有 float:top 但我想知道是否有一种方法可以使用 jQuery/Javascript 实现该布局？查看下面的图片链接，可以更好地了解我想要实现的目标。

样机

所以到目前为止我所尝试的是 .slice() 在 div .wrap 内每两个 li(s) 并 float 该 div 左侧。它确实完成了工作，但一旦你有了更大的图像(参见示例 suqare n6)，它就会停止。

我还尝试使用 css3 -webkit-transform:rotate(-90deg) 旋转整个容器，但它也不起作用，因为缩略图必须使用百分比才能在浏览器时流畅缩放调整大小。

我还使用了一个名为 masonry 的 jQuery 插件，但效果不佳

各位可以帮忙吗？我真的很想让这个布局发挥作用。

Answer 1

好吧，我也一直在尝试找出这个布局，最接近的是使用 PHP/JAVASCRIPT 来构建它。

这个想法是1) 使用一种尺寸构建和排列所有可能的位置。2) 然后遍历该数组并将数组中可能的位置标记为开放。3) 然后运行新的持仓列表并显示未平仓合约。

这是我到目前为止得到的代码。这会生成 300 像素 X 300 像素的框，并在您指定数组的位置插入 600 x 600 像素的框。

我希望这对您有所帮助，如果您找到改进方法，请发布。

仅供引用:我对在这里发帖真的很陌生，并且似乎无法正确发布代码。

数组:

            $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>';
                }
            }   

JavaScript:

    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++;
    });