在刷新和/或计时器上的div之间切换内容

Question

I'm trying to make a simple page with 4 divs, each containing an image uploaded to a database.

I'd like for the image in each div to change when someone refreshes the page (and eventually after a few minutes of navigation), so that each time you open the page, the picture inside each will be different.

For example: I have 10 images

1° time: div1(img1), div2(img2), div3(img3), div4(img4)

2° time: div1(img9), div2(img6), div3(img8), div4(img3)

3° time: div1(img1), div2(img4), div3(img10), div4(img5)

and so on.. The trickiest part, is that there shouldn't be the same image twice, so let's say it should never happen:

div1(img1), div2(img2), div3(img3), div4(img1)

EDIT: So this happened: demo: http://codepen.io/anon/pen/grbwvx I was moving around divs, and they are supposed to be squares (which they are, if I don't put the images in it).. But when the images are loaded, it screws up my css. I tried removing margins and stuff like that, but nothing worked. Any idea how to fix it?

Answer 1

The best approach is to serve unique images from the database on each interval. If you are trying to avoid using SQL/MySQL, let's assume you have a list (an array) on the page ready.

HTML:

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<button>reload</button>

JQuery:

/* generate the array of images you want to choose from */
var srcarray = [
  "https://s-media-cache-ak0.pinimg.com/736x/7e/1d/4a/7e1d4a1566976f139a2ba58b108e2bce.jpg",
  "http://rs832.pbsrc.com/albums/zz248/Paria53/Edited/Random.jpg~c200",
  "http://images.freeimages.com/images/premium/large-thumbs/5187/51875120-random-numbers-forming-a-sphere.jpg",
  "http://ccl.northwestern.edu/netlogo/community/land-random.png",
  "http://d2894izlucyd11.cloudfront.net/images/p/88/27/08/dd/7df9039478fe4a238746d1acd38a980e.jpg",
  "http://t10.deviantart.net/lGgxLge7u3hucL5OBoZkiDvnnqA=/300x200/filters:fixed_height(100,100):origin()/pre15/5fe0/th/pre/f/2008/191/1/9/random_by_d_faultx.png",
  "http://www.moooi.com/sites/default/files/styles/project_thumb_product/public/thumb-image/randomledfloorm.jpg?itok=2wIu1tk6",
  "http://images5.fanpop.com/image/photos/25200000/Colorful-Bokeh-Lights-random-25230232-200-200.gif",
  "http://t00.deviantart.net/YWdrXj-21kfzc-IMLSli2UmdhGU=/300x200/filters:fixed_height(100,100):origin()/pre13/93b0/th/pre/f/2010/044/b/4/random_space_invaider_by_random_liquo.jpg",
  "http://www.islandstone.com/mediafiles/product_records/56_Random_lines_thumb.jpg"
];

function randomizeImages() {
  arr = [];
  /* select unique images from the array and display them into relevant divs (any number divs allowed, should be less than available images)*/
  while(arr.length < $("section div").length){
    var randomnumber= srcarray[Math.floor(Math.random()*srcarray.length)];
    var found=false;
    for(var i=0;i<arr.length;i++){
       if(arr[i]==randomnumber){found=true;break}
    }
    if(!found)arr[arr.length]=randomnumber;
    $( "section div:nth-child("+(i+1)+")" ).html( '<img src="'+randomnumber+'">' );
  };
}

//randomize images when page is reloaded
$(function() {
 randomizeImages();
});
//randomize images when clicking a reload button (for display purposes only)
$("button").click ( function() {
  randomizeImages(); 
});
//randomize images every 5 seconds (change interval as you wish)
window.setInterval(function(){
  randomizeImages(); 
}, 5000);

I made a demo for you: http://codepen.io/VsevolodTS/pen/KzPdpX