TED Talkのホームページがどのように機能するかを正確に理解しようとしています。アニメーションのたわごとはさておき、ボックスの整理方法は本当に魅力的です。
一見、jQuery masonry プラグインのように見えますが、いくつかの直角三角形を作成する傾向があることがすぐに明らかになりますが、列や行の固定数はなく、生成される最終的な形状は常に完全にソリッドです (中空部分はありません)。 ）。
私の最初の仮定は、ボックス (サイズはサイト上の何らかの要因によって事前に決定されている) がランダムに並べ替えられ、いくつかの単純なルールを使用して順次グリッドに追加されたというものでしたが、それらのルールが何であるか、またはそれらがどのように行われるかを特定することはできません。最終的な形状のくぼみを防ぐことができます。
これがどのように機能するか誰にもわかりませんか？
間違っているかもしれませんが、いくつかの観察：
特定のセクションには、常に 4(#1) があります。(#2)、(#3)、および (#4) の数は、次のいずれかです。
注文について：
これを行うJavaScriptコードは次のとおりです（.htmlページが必要ですdiv#container）：
function ted_layout(settings, coordinates_array, num_elements, start_x, start_y, arrangement, remaining_elements, is_child){
var num_columns = arrangement.length;
var col = 0;
var current_x = start_x;
while( col < num_columns){
var column_x_scale = 100 / arrangement[col];
var current_column_arrangement;
if(is_child){
if(num_elements > 14){
if(column_x_scale == 50){
current_column_arrangement = random_shuffle([1, 2, 2]);
} else {
current_column_arrangement = random_shuffle([1, 2]);
}
} else if(num_elements > 10){
if(column_x_scale == 50){
current_column_arrangement = [1];
} else {
current_column_arrangement = random_shuffle([1, 2]);
}
} else{
current_column_arrangement = random_shuffle([1, 2]);
}
} else {
if(num_elements > 14){
if(column_x_scale == 25){
current_column_arrangement = [1, 1];
} else {
current_column_arrangement = [1];
}
} else if(column_x_scale == 25){
current_column_arrangement = [1, 1];
} else {
current_column_arrangement = [1];
}
}
var num_rows = current_column_arrangement.length;
var current_y = start_y;
var row = 0;
while(row < num_rows){
var numRects = current_column_arrangement[row];
var current_rectangle = 0;
var current_rectangle_x = current_x;
while( current_rectangle < numRects){
if(remaining_elements == 0){
return coordinates_array;
}
var currScale = column_x_scale/numRects;
var height = settings.height * currScale*0.01;
var width = settings.width * currScale*0.01;
if(current_rectangle == numRects-1 && row == num_rows-1 && is_child && Math.random() > 0.5){
coordinates_array.push({x: current_rectangle_x, y:current_y, w:width/2, h:height/2, scale:currScale/2*0.01*2})
}
else{
coordinates_array.push({x: current_rectangle_x, y:current_y, w:width, h:height, scale:currScale*0.01*2})
}
current_rectangle_x += width;
remaining_elements--;
current_rectangle++;
}
row++;
current_y += height;
}
current_x = current_rectangle_x;
col++;
}
if( remaining_elements > 0){
coordinates_array = ted_layout(settings, coordinates_array, num_elements, start_x, current_y, random_shuffle([2, 4, 4, 2]), remaining_elements, true);
}
return coordinates_array;
}
function generate_ted_layout(num_elements){
var settings = {
width: 640,
height: 480,
};
var coordinates_array=[];
returned = ted_layout(settings, coordinates_array, num_elements, 0, 0, random_shuffle([2, 4, 4, 2]), num_elements, false);
console.log("Returned", returned)
return returned;
}
function random_shuffle(array){
var temp;
for(var i = array.length - 1; i >= 1; i--){
var elem = Math.floor(Math.random() * (i + 1));
temp = array[elem];
array[elem] = array[i];
array[i] = temp;
}
return array;
}
function initAndLayout() {
var items = generate_ted_layout(20);
var container = $('#container'); // cache jquery object
console.log(items);
for (var i = 0; i < items.length; i++)
{
var item = items[i];
console.log(item);
$('#container').append($('<div class="item"></div>').css({'left': item.x, 'top': item.y, 'width': item.w, 'height': item.h}));
}
}
私はそれを解決したと思います。
まず、アイテムの数が大幅に異なります。現在、ボックスが 13 個しかないページを表示しています。
まず、ブロックの 4 つのサイズのそれぞれに、最大から最小まで、A、B、C、D の名前を付けます。
私たちが知っているように、最初の「行」には 2 つの As と 2 つの垂直スタックの B が含まれています。たとえば、次のようになります。
_______________________
| A | B | A | B |
| |___| |___|
| | B | | B |
|_______|___|_______|___|
これらの配置はランダムに見えますが、B は常に同じ垂直パターンにあります。今これを見ていると、2行しかないことに気付きました.2行目も同じように機能します.
2 番目の行は最初の行の 2 倍の高さで、ページの残りの部分を占めています。これは、(少なくとも部分的に) ランダムに選択された、水平に積み重ねられた形状のパターンで構成されています。
これらの形状のパターンを 9 つ見つけました。そのうちの 2 つは単一の A または B で、残りは次のとおりです。
_______ _______ _______ ___ ___ _______ ___
| B | B | | A | | B | B | |C|C| | B | | A | |C|C|
|___|___| | | |___|___| | B | |___| | |
| A | | | | B | B | |___| |C|D | |
| | |_______| |___|___| |_______|
| | | B | B | | A | | B |
|_______| |___|___| | | |___|
|B |C| |B |C| | |
|___| |___| |_______|
次の質問は、これらがどのように選択されるかです。最適な構成を見つけるには、巧妙な検索が必要になる場合があります。たとえば、表示するアイテムが X 個ある場合、行の幅を超えない合計 X 個の構成を見つける必要があります。
これは、ブロック数をパターンの幅で割ったパターン密度のメトリックで行うことができます。