1

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

小样 http://public.coco.com.au/empty-projects/columns/assets/img/mockup.png

因此，到目前为止，我尝试的是.slice()在 div .wrap 中的每两个 li(s) 并浮动该 div 离开。它确实完成了这项工作，但是一旦您拥有更大的图像（请参见示例 suqare n6），它就会刹车。

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

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

你们能帮忙吗？我真的很想让这个布局工作。

4

1 回答 1

0

好的，所以我也一直在尝试弄清楚这个布局，我得到的最接近的是使用 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++;
    });
于 2013-10-29T03:46:45.660 回答