Alterar posição de imagens no site

RJacques · 30 de junho de 2016

boa tarde gente

vou usar um exemplo, tenho um site e nele tem 4 imagens e cada vez que dou um refresh na página

essas imagens troca de posição, de que forma posso fazer isso.

agradeço

att

Richardy

DiF · 30 de junho de 2016

@RJacques Olá

Podemos ajudar com sua dúvida.

Mas antes poderia dar mais informações? Tem algum exemplo prático de outro site para que possa servir de referência?

RJacques · 30 de junho de 2016

olá Dif, teria sim

esse site http://calhasemflorianopolis.com.br

tem 4 imagens e a cada reload da pagina as imagens trocam de lugar e era bem isso que estou tentando aprender a fazer

agradeço

Rjacques

DiF · 30 de junho de 2016

@RJacques Entendi. o que você quer basicamente é reordenar randomicamente os elementos.

Para isso é necessário javascript(jQuery para ser mais fácil).

$(document).ready(function(){
    //Coloca a UL na variável
    var ul = $("#minhaLista");
    
    // Coloca os items da lista em uma variável
    var lis = ul.children();
    
    //Sorteia randomicamente
    var sorteada = Math.floor(Math.random()*lis.length);
    
    //Laço de for para varrer as imagens e mostra-las de ordem aleatória
    for ( var i = 0 ; i < sorteada ; i++ ){
        lis.eq(i).detach().appendTo(ul);
    }
});