jQuery image grid effect

Question

У меня есть изображение, сидящее на странице, на которой я хочу создать наложение сетки (которое покрывает изображение черным заполнением), которое будет разделено на квадраты размером 50x50 пикселей (что когда-либо размером, tbh).

Квадраты сетки затем перевернут, по одному за раз, в случайных положениях, отображая изображение под ним.

Единственный способ, которым я могу придумать это, - создать целую кучу квадратов сетки и наложить их на изображение с помощью jQuery, а затем перевернуть каждый квадрат изображения отдельно. Это, однако, было бы болью в заднице. Выполнение этого динамически в jQuery - это то, что я надеюсь выполнить.

Любые идеи?

Answer 1

Вы можете создать сетку квадратов в цикле с помощью JQuery, как это:

var gridContainer = $('<div class="GridContainer"></div>') 
    .width(yourImage.width()) 
    .height(yourImage.height()); 
for(var i = 0; i < squareCount; i++) { 
    gridContainer.append($('<div class="GridCell"></div>')); 
}