Javascript 实现fluidjstile接口

我正在建立一个摄影网站，我想创建一个漂亮的“平铺”界面，它看起来类似于新版MSN Money Now上的界面（注意：新版网站只能在Windows 8 PC上查看）。我试图用Javascript实现这一点

以下是一个带有预填充数据的示例页面：

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

1） 当我的图像第一次加载时，我只看到它们的最高结果，直到加载所有图像并执行JS为止。MSN Money web只显示一个绿色区域，图像稍后会出现，并且已经适当调整了大小。 2） 当我调整窗口大小时，它远离流体，并且计算和主要是图像大小调整非常明显可见。然而，在MSN Money上，调整大小是非常平滑的，甚至图像似乎也只是调整大小而没有任何问题。此外，他们设法使字体调整流畅

请你解释一下，MSN Money网站是如何取得这些成果的？ 我在这里看到了一些关于堆栈溢出的类似问题，但它们从来都不要求单个瓷砖的宽度和高度相等，这正是我的设计所需要的

附加问题：请您添加一些关于如何实现DIV响应性动画回流的解释？上的示例-当您更改窗口大小时，它会以动画方式重新显示所有引号

编辑： 我附加了我当前的代码，这是远远不正确的（性能非常低，图像看起来太大，他们的大小下降后，他们都下载）

代码的第一部分（将所有事件附加到平铺并在单击时添加动画）：

以及主要部分-调整大小：

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%");
});}

下面是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>   

试验
经检验
试验
经检验
试验
经检验
试验
经检验
试验
经检验
试验
经检验
试验
经检验

如果我是你，我会使用同位素作为基本布局，添加幻灯片并单击旁边的事件。你可以插入你喜欢的任何内容

JS

概念验证-同位素内部动画

请注意，此动画在使用前是完全混匀的

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

函数animatie（）{
var d=0；
对于（变量i=0；i<3；++i）{
var b=“#info”+i；
$（b）.css（'背景'，'银'）；
$（b）.hide（）.delay（d）.slideDown（1000）.delay（3000）.slideUp（1000）；
d+=5000；
}
}
动画（）；
设置间隔（动画，15000）；
$（函数（）{
对于（变量i=0；i<3；++i）{
变量z='.box'+i；
var divHeight=$（z）.height（）；
$（z）.css（'max-height'，divHeight+'px'）；
$（z）.css（'max-height'，divHeight+'px'）；
$（z）.css（'溢出'，'隐藏'）；
}
});
$（窗口）。调整大小（函数（）{
对于（变量i=0；i<3；++i）{
变量z='.box'+i；
var divHeight=$（z）.height（）；
$（z）.css（'max-height'，divHeight+'px'）；
$（z）.css（'溢出'，'隐藏'）；
}
});

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

---

在同位素中添加了动画，请查看上面更新的jsFiddles

@MZetko我理解并尊重您希望在您的计算机上实现它的愿望

@apaul34208在建议同位素时指出了正确的方向。这是用于这种布局网格的术语。您不必使用jQuery，但了解它是如何完成任务的会很有用…：）

我目前正在用这个模板实现一个Wordpress网站，尽管我认为自己做这个会很有趣，但我很高兴我花了这些钱在上面。现在我可以完成设置并继续下一个项目。干杯

1）加载图像

默认情况下，您应该隐藏图像。您可以通过将其尺寸设置为

1px

（使用

显示：无

可能导致加载故障）。在css的末尾：

div.tile img { width:1px; height:1px }

.col .tile { background-color: #2440b2; }

计算完成后，这将被每个元素的特定平铺样式覆盖

有背景

div.tile img { width:1px; height:1px }

.col .tile { background-color: #2440b2; }

-webkit-transition: left .5s, top .5s;
-moz-transition: left .5s, top .5s;
transition: left .5s, top .5s;