Построение сетки флюидной мозаики

Я пытаюсь построить сетку для жидкой мозаики. Я использовал жидкое слово, так как у меня уже есть рабочая сетка мозаики. Вы можете проверить скрипку я сделал специально для этого вопроса: https://jsfiddle.net/a995w8ye/Построение сетки флюидной мозаики

Мой HTML является:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Teste</title> 
     <link rel="stylesheet" href="style.css"> 
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
     <script src="script.js"></script> 
    </head> 
    <body> 
     <div id="divContainer"> 
      <div id="1" class="cube"> 
      </div> 
      <div id="2" class="cube"> 
      </div> 
      <div id="3" class="cube"> 
      </div> 
      <div id="4" class="cube"> 
      </div> 
      <div id="5" class="cube"> 
      </div> 
      <div id="6" class="cube"> 
      </div> 
      <div id="7" class="cube"> 
      </div> 
      <div id="8" class="cube"> 
      </div> 
      <div id="9" class="cube"> 
      </div> 
      </div> <!-- End of div container --> 
     </body> 
    </html>

CSS:

#divContainer { 
    width: 1000px; 
    height: 800px; 
    border: 1px solid black; 
} 

.cube { 
    position: relative; 
float: left; 
width: calc(1000px/3); 
height: calc(800px/3); 
cursor: pointer; 
} 

.cube.fullscreen{ 
    z-index: 9; 
    width: 100%; 
    height: 100%; 
    position: relative; 
    background-color: #131313; 
} 

.cube:hover { 
    opacity: 0.75; 
}

JS:

function getRandomColor() { 
    var letters = 'ABCDEF'.split(''); 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
} 

function fillColors(){ 
    for (var i = 1; i<=9; i++) 
    { 
     document.getElementById(i).style.background = getRandomColor(); 
    } 
} 

window.onload=function(){ 

fillColors(); 

$('.cube').on('click', function() { 

    $(this).addClass('fullscreen'); 
    $('.cube').each(function(){ 
     if($(this).hasClass('fullscreen')) 
     { 
      return true; 
     } 
     $(this).hide(); 
    }) 
}) 
}

Ширина и высота, если каждый куб равен 1/3 основного div. Они оставлены поплавками, и они имеют относительное положение. Мне нужно относительное положение, так как «divContainer» в реальном случае не имеет фиксированного размера, и в этом случае, поскольку все кубы имеют ровно 1/3 (ширина и высота), они будут создавать идеальную сетку, которая может быть 3x3 или даже 1x9.

Когда пользователь нажимает на куб, этот куб получает другой класс с более высоким z-индексом, а ширина и высота равны его родительскому. Другие кубы не будут видны в конце. Они могут или не исчезнут. В конце концов, я просто хочу увидеть расширенный куб, который я нажал.

Это просто. Я хочу сделать, чтобы куб медленно расширялся, в то время как другие тоже медленно исчезали или, по крайней мере, покрывали другие с более высоким z-индексом. Это легко достичь в верхнем левом кубе, используя .animate(), но в среднем кубе или внизу справа мне трудно сделать это.

P.S: ATM Я не беспокоюсь о том, что все возвращается к его первоначальному состоянию. Я просто хочу расширить каждый div, как упоминалось.

Любые предложения?

Заранее спасибо

источник

2015-08-19 andrescpacheco

UPDATE

Я установил код, основанный на ваш комментарий

var container = $('#container'), 
 
    cubes = $('#container > div'), 
 
    count = 3, unit = 'vw', 
 
    fullstate = false; 
 

 
function randomcolor() { 
 
    var letters = 'ABCDEF'.split(''); 
 
    var color = '#'; 
 
    for (var i = 0; i < 6; i++) { 
 
    color += letters[Math.floor(Math.random() * 16)]; 
 
    } 
 
    return color; 
 
} 
 

 
function fillcolor(){ \t 
 
    $(this).css({background: randomcolor()}); 
 
} 
 

 
function setup() { \t 
 
    var t = $(this), 
 
     i = t.index(); 
 
    t.data({ 
 
    top: Math.floor(i/count) * 100/count, 
 
    left: (i%count) * 100/count 
 
    }); 
 
} 
 

 
function gridposition() { 
 
    var t = $(this); 
 
    t.css({ 
 
    'z-index': 0, 
 
    top: t.data('top') + unit, 
 
    left: t.data('left') + unit, 
 
    width: 100/count + unit, 
 
    height: 100/count + unit 
 
    }); 
 
} 
 

 
function fullcube() { 
 
    $(this).css({ 
 
    'z-index': 9, 
 
    width: 100 + unit, 
 
    height: 100 + unit, 
 
    top: 0, 
 
    left: 0 
 
    }); 
 
} 
 

 
cubes.each(function() { 
 
    setup.call(this); 
 
    fillcolor.call(this); 
 
    gridposition.call(this); 
 
}).on('click', function() { 
 
    if (fullstate) { 
 
    cubes.each(gridposition); 
 
    } else { 
 
    fullcube.call(this); 
 
    } 
 
    fullstate = !fullstate; 
 
});

html, 
 
body, 
 
#container, 
 
#container > div.fullscreen { 
 
    width: 100%; height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
#container > div { 
 
    position: absolute; 
 
    transition: all 0.5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div></div> <div></div> <div></div> 
 
    <div></div> <div></div> <div></div> 
 
    <div></div> <div></div> <div></div> 
 
</div>

OLD ANSWER

Это, как я бы решить эту проблему:

var container = $('#container'), 
 
    cubes = $('#container > div'); 
 

 
function randomcolor() { 
 
    var letters = 'ABCDEF'.split(''); 
 
    var color = '#'; 
 
    for (var i = 0; i < 6; i++) { 
 
    color += letters[Math.floor(Math.random() * 16)]; 
 
    } 
 
    return color; 
 
} 
 

 
function fillcolor(){ \t 
 
    $(this).css({background: randomcolor()}); 
 
} 
 

 
cubes.each(fillcolor).on('click', function() { 
 
    var h = 'hidden'; 
 
    cubes.toggleClass(h); 
 
    $(this).removeClass(h).toggleClass('fullscreen'); 
 
});

html, 
 
body, 
 
#container, 
 
#container > div.fullscreen { 
 
    width: 100%; height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
#container > div { 
 
    float: left; 
 
    width: 32vw; height: 32vw; 
 
    transition: all 0.5s; 
 
} 
 

 
#container > div:hover { 
 
    opacity: 0.75; 
 
} 
 

 
#container > div.hidden { 
 
    width: 0; height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div></div> <div></div> <div></div> 
 
    <div></div> <div></div> <div></div> 
 
    <div></div> <div></div> <div></div> 
 
</div>

источник

2015-08-19 18:08:09 rafaelcastrocouto

тумблер делает другие кубики становятся все меньше и меньше, пока их ушли. Это вызывает странное поведение в сетке, вызывающее пустые пятна (или цвет фона основного div) во время перехода. Моей мыслью был щелчок куба, растущего в верхней части остальных. Другие кубы могут исчезнуть или не исчезнуть. В конце концов, они не должны быть видимыми. – andrescpacheco

Обновлен ответ, чтобы удовлетворить ваши потребности ... надеюсь, вам понравится! ; D – rafaelcastrocouto

Больше не может дать вам больше голосов. Он работал, как я хотел. Фактически, поскольку вы инициируете все в javascript, я могу добавить переменные, чтобы установить размер, который я хочу легко. Спасибо – andrescpacheco

Построение сетки флюидной мозаики

ответ

Смежные вопросы