实现流体JS tile接口

Question

实现流体JS tile接口

Mar*_*und 6 javascript html5 resize css3 tile

我正在建立一个摄影网站,我想创建一个漂亮的"平铺"界面,它看起来类似于新版本MSN Money Now上的界面(注意 - 该网站的新版本只能在Windows 8 PC上查看) - http://t.money.msn.com/now/.我试图在Javascript中实现这一点.

以下是带有预填充数据的示例页面:http://photoachiever.azurewebsites.net/en

我创建了Tile组 - 每个2个单位高,2个单位宽,可以包含一个大方形瓷砖,两个宽瓷砖或四个小方形瓷砖.现在,因为我希望网站具有响应能力,我想在Javascript中动态计算最佳单位大小,以便始终100%的空间被填充,而对于更宽的屏幕,例如更多的列可见,等等.它在MSN Money网站上的工作方式相同,但有两个重要区别:

1)当我的图像第一次加载时,我只是在它们的最高结果中看到它们,直到加载所有图像并执行JS的程度.MSN Money网站只显示一个绿色区域,稍后显示图像,已经适当调整大小.2)当我调整窗口大小时,它远离流动,并且主要是图像调整大小非常明显.然而,在MSN Money上,调整大小非常平滑,甚至图像似乎只是在没有故障的情况下调整大小.此外 - 他们设法使字体流畅地调整大小.

能否请您解释一下,MSN Money网站如何实现这些结果？我在Stack Overflow上看到了一些类似的问题,但它们从来没有要求各个瓷砖的宽度和高度相同,这对我的设计来说确实需要.

奖金问题:请你补充说明如何实现div的响应式动画重排？在http://www.brainyquote.com/上找到的示例- 当您更改窗口大小时,它会以动画方式回流所有引号.

编辑:我正在附加我当前的代码,这是远非正确的(性能非常低,图像首先显得过大,并且在下载后它们的大小会下降).

代码的第一部分(将所有事件附加到切片并在点击时添加动画):

function attachTileEvents() {
if ($(".tile-flow").size() >= 1) {
    $(window).resize(function () {
        delay(function () {
            resizeTiles();
        }, 100);
    });
    $(document).on("click", ".tile-flow .load-next-page", manualLoadContentDetection);
    $(window).on("scroll", scrollLoadContentDetection);
    $(document).on("touchend", scrollLoadContentDetection);
}
resizeTiles();
$(".tile .contents").each(function () {
    var tile = $(this).parent()[0]
    var mouse = { x: 0, y: 0, down: false };

    var maxRotation = 16;
    var minScale = 0.95;
    var setRotation = function (scaled) {
        //Rotations as percentages 
        var width = tile.offsetWidth;
        var height = tile.offsetHeight;
        var diag = Math.sqrt((width / 2) * (width / 2) + (height / 2) * (height / 2));
        var dist = Math.sqrt((mouse.x - (width / 2)) * (mouse.x - (width / 2)) + (mouse.y - (height / 2)) * (mouse.y - (height / 2)));
        var fract = 1.0;
        if (dist > 0) {
            fract = dist / diag;
        }
        var yRotation = (mouse.x - (width / 2)) / (width / 2);
        var xRotation = (mouse.y - (height / 2)) / (height / 2);

        if (scaled) {
            tile.style.webkitTransform = "rotateX(" + -xRotation * maxRotation + "deg)" + " rotateY(" + yRotation * maxRotation + "deg)" + " scale(" + (minScale + fract * (1 - minScale)) + ")";
            tile.style.mozTransform = "rotateX(" + -xRotation * maxRotation + "deg)" + " rotateY(" + yRotation * maxRotation + "deg)" + " scale(" + (minScale + fract * (1 - minScale)) + ")";
            tile.style.transform = "rotateX(" + -xRotation * maxRotation + "deg)" + " rotateY(" + yRotation * maxRotation + "deg)" + " scale(" + (minScale + fract * (1 - minScale)) + ")";
        } else {
            tile.style.webkitTransform = "rotateX(" + -xRotation * maxRotation + "deg)" + " rotateY(" + yRotation * maxRotation + "deg)";
            tile.style.mozTransform = "rotateX(" + -xRotation * maxRotation + "deg)" + " rotateY(" + yRotation * maxRotation + "deg)";
            tile.style.transform = "rotateX(" + -xRotation * maxRotation + "deg)" + " rotateY(" + yRotation * maxRotation + "deg)";
        }
    }
    var MouseDown = function (e) { mouse.x = e.offsetX; mouse.y = e.offsetY; mouse.down = true; setRotation(true); }
    var MouseUp = function (e) { if (mouse.down) { mouse.down = false; tile.style.webkitTransform = "rotateX(0deg)" + " rotateY(0deg) scale(1.0)"; tile.style.mozTransform = "rotateX(0deg)" + " rotateY(0deg) scale(1.0)"; tile.style.transform = "rotateX(0deg)" + " rotateY(0deg) scale(1.0)"; } }
    var MouseOut = function (e) { mouse.down = false; tile.style.webkitTransform = "rotateX(0deg)" + " rotateY(0deg) scale(1.0)"; tile.style.mozTransform = "rotateX(0deg)" + " rotateY(0deg) scale(1.0)"; tile.style.transform = "rotateX(0deg)" + " rotateY(0deg) scale(1.0)"; }
    var MouseMove = function (e) { mouse.x = e.offsetX; mouse.y = e.offsetY; if (mouse.down == true) { setRotation(false); } }
    $(tile).on("mousemove", MouseMove);
    $(tile).on("mousedown", MouseDown);
    $(tile).on("mouseup", MouseUp);
    $(tile).on("mouseout", MouseOut);
});}

Run Code Online (Sandbox Code Playgroud)

主要部分 - 调整大小:

var TileSizes = { wideWidth: 0, singleWidth: 0, margin: 0 };
function resizeTiles() {
var rowColumnNumber = 2;
var width = $(window).width();
if (width >= 2500) {
    rowColumnNumber = 7;
}
else if (width >= 2000) {
    rowColumnNumber = 6;
} else if (width >= 1600) {
    rowColumnNumber = 5;
} else if (width >= 1280) {
    rowColumnNumber = 4;
} else if (width >= 768) {
    rowColumnNumber = 3;
} else if (width >= 480) {
    rowColumnNumber = 2;
} else {
    rowColumnNumber = 1;
}
var totalWidth = $(".tile-flow").width() - 17; //compensate for the scrollbar
//calculate the margin size : 5% of the flow width
var margin = Math.round(totalWidth * 0.05 / rowColumnNumber);
var wideSize = Math.floor((totalWidth - margin * (rowColumnNumber - 1)) / rowColumnNumber);
var halfSize = Math.floor((wideSize - margin) / 2);
var quaterSize = Math.floor(halfSize * 2.5 / 3);
var heightSize = Math.floor(halfSize * 2 / 2.0);
var doubleHeightSize = heightSize * 2 + margin;
var detailsSize = quaterSize * 2 + margin;
TileSizes.wideWidth = doubleHeightSize;
TileSizes.singleWidth = heightSize;
TileSizes.margin = margin;
$(".big-square-tile").width(doubleHeightSize);
$(".big-square-tile").height(doubleHeightSize);
$(".wide-tile").width(doubleHeightSize);
$(".small-tile").width(halfSize);
$(".tile-flow .col .small-tile:even").css("margin-right", margin);
$(".small-tile").height(heightSize);
$(".wide-tile").height(heightSize);
$(".col").width(doubleHeightSize);
$(".col").css("margin-right", margin);
$(".col:nth-child(" + rowColumnNumber + "n)").css("margin-right", 0);
//all tiles get bottom margin

var how = 0;
$(".wide-tile .contents footer").each(function () {
    if ((how % 4 == 0) || (how % 4 == 1)) {
        $(this).width(TileSizes.singleWidth - 20);
    } else {
        $(this).height(75);
    }
    if (how % 4 == 0) {
        $(this).css("left", TileSizes.wideWidth);
    } else if (how % 4 == 1) {
        $(this).css("left", -TileSizes.singleWidth);
    }
    else if (how % 4 == 2) {
        $(this).css("top", TileSizes.singleWidth);
    } else {
        $(this).css("top", -95);
    }
    how = how + 1;
});

$(".big-square-tile .contents footer").each(function () {
    $(this).height(75);
    if (how % 2 == 0) {
        $(this).css("top", TileSizes.wideWidth);
    } else {
        $(this).css("top", -95);
    }
    how = how + 1;
});

$(".small-tile .contents footer").each(function () {
    $(this).width(TileSizes.singleWidth - 20);
    $(this).height(TileSizes.singleWidth - 20);
    if (how % 4 == 0) {
        $(this).css("left", TileSizes.singleWidth);
    } else if (how % 4 == 1) {
        $(this).css("left", -TileSizes.singleWidth);
    }
    else if (how % 4 == 2) {
        $(this).css("top", TileSizes.singleWidth);
    } else {
        $(this).css("top", -TileSizes.singleWidth);
    }
    how = how + 1;
});

$(".tile").css("margin-bottom", margin);
//resize images    
var imageList = Array();
$(".big-square-tile img").each(function () {
    imageList.push($(this));
    var img = new Image();
    img.onload = function () {
        var originalHeight = this.height;
        var originalWidth = this.width;
        var index = parseInt(this.id.replace("RESIZINGBIG", ""));
        if (originalHeight > originalWidth) {
            imageList[index].css("height", "auto");
            imageList[index].css("width", "100%");
        } else {
            imageList[index].css("height", "100%");
            imageList[index].css("width", "auto");
        }
    }
    img.id = "RESIZINGBIG" + (imageList.length - 1);
    img.src = $(this).attr('src');
});

$(".small-tile img").each(function () {
    imageList.push($(this));
    var img = new Image();
    img.onload = function () {
        var originalHeight = this.height;
        var originalWidth = this.width;
        var index = parseInt(this.id.replace("RESIZINGSMALL", ""));
        if (originalHeight > originalWidth) {
            imageList[index].css("height", "auto");
            imageList[index].css("width", "100%");
        } else {
            imageList[index].css("height", "100%");
            imageList[index].css("width", "auto");
        }
    }
    img.id = "RESIZINGSMALL" + (imageList.length - 1);
    img.src = $(this).attr('src');
});

$(".wide-tile img").each(function () {
    $(this).css("height", "auto");
    $(this).css("width", "100%");
});}

Run Code Online (Sandbox Code Playgroud)

以下是HTML代码现在的样子:

<div class="tile-flow">
    <div class="tile-row">
        <div class="col">
            <div class="tile big-square-tile">
                <div class="contents">
                    <img src="~/Images/Test/5.jpg" />
                    <footer>
                        <h1>Test</h1>
                        <span class="author">by Test</span>
                    </footer>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="tile small-tile">
                <div class="contents">
                    <img src="~/Images/Test/2.jpg" />
                    <footer>
                        <h1>Test</h1>
                        <span class="author">by Test</span>
                    </footer>
                </div>
            </div>
            <div class="tile small-tile">
                <div class="contents">
                    <img src="~/Images/Test/3.jpg" />
                    <footer>
                        <h1>Test</h1>
                        <span class="author">by Test</span>
                    </footer>
                </div>
            </div>
            <div class="tile wide-tile">
                <div class="contents">
                    <img src="~/Images/Test/4.jpg" />
                    <footer>
                        <h1>Test</h1>
                        <span class="author">by Test</span>
                    </footer>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="tile big-square-tile">
                <div class="contents">
                    <img src="~/Images/Test/6.jpg" />
                    <footer>
                        <h1>Test</h1>
                        <span class="author">by Test</span>
                    </footer>
                </div>

            </div>
        </div>
        <div class="col">
            <div class="tile wide-tile">
                <div class="contents">
                    <img src="~/Images/Test/1.jpg" />
                    <footer>
                        <h1>Test</h1>
                        <span class="author">by Test</span>
                    </footer>
                </div>
            </div>
            <div class="tile wide-tile">
                <div class="contents">
                    <img src="~/Images/Test/7.jpg" />
                    <footer>
                        <h1>Test</h1>
                        <span class="author">by Test</span>
                    </footer>
                </div>
            </div>
        </div>
</div>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 1

apa*_*aul 7

如果我是你,我会使用Isotope作为基本布局,并添加幻灯片放映并点击它旁边的事件.您可以插入大多数您喜欢的内容. jQuery Isotope.

更新的工作模型

整页结果

JS

$(function () {

    var $container = $('#container');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.photo'
        });
    });
});


var $container = $('#container');
// initialize Isotope
$container.isotope({
    // options...
    resizable: false, // disable normal resizing
    // set columnWidth to a percentage of container width
    masonry: {
        columnWidth: $container.width() / 5
    }
});

// update columnWidth on window resize
$(window).smartresize(function () {
    $container.isotope({
        // update columnWidth to a percentage of container width
        masonry: {
            columnWidth: $container.width() / 5
        }
    });
});

//click function

    $(function () {
        $('.photo').click(function () {
            $(this).toggleClass('red');
        });
    });

//hover function

    $(function () {
        $('#photo1').hover(function () {
            $('#info1').fadeToggle();
        });
    });

Run Code Online (Sandbox Code Playgroud)

概念证明 - 同位素内的动画

请注意,此动画在使用前是完全kludge微调.

 function animatie() {
     var d = 0;
     for (var i = 0; i < 3; ++i) {
         var b = "#info" + i;
         $(b).css('background', 'silver');
         $(b).hide().delay(d).slideDown(1000).delay(3000).slideUp(1000);
         d += 5000;
     }
 }
 animatie();
 window.setInterval(animatie, 15000);

 $(function () {
     for (var i = 0; i < 3; ++i) {
         var z = '.box' + i;
         var divHeight = $(z).height();
         $(z).css('max-height', divHeight + 'px');
         $(z).css('max-height', divHeight + 'px');
         $(z).css('overflow', 'hidden');
     }
 });
 $(window).resize(function () {
     for (var i = 0; i < 3; ++i) {
         var z = '.box' + i;
         var divHeight = $(z).height();
         $(z).css('max-height', divHeight + 'px');
         $(z).css('overflow', 'hidden');
     }
 });

Run Code Online (Sandbox Code Playgroud)

这是一个非常酷的插件,用于布局,排序和过滤.它将为您提供瓷砖和动画作为基本功能.

流体同位素

图像加载插件

无限滚动

在Isotope中添加了动画,检查上面更新的jsFiddles

归档时间：	12 年，6 月前
查看次数：	2911 次
最近记录：	12 年，6 月前