我以矩陣索引中的每個圖像解決的問題。第一個完成的版本有點粗糙，並且有時會在相鄰圖像的縱橫比差別很大時重新排序。
我將處理更新後的版本，該版本對圖片尺寸進行了說明，並在完成時更新答案和小提琴。
我用這個JS/jQuery的供試品重配置功能：
樣品fidde：https://jsfiddle.net/069f72ep/
// define currentColumnCount outside the function scope so it can be compared when window is resized
var currentColumnCount;
var attributeToIndex; // switch to src for actual, title for debug/human-readable
function rearrangePhotos(performRearrange) {
// if not performing rearragement, index titles instead of src for debug/human
attributeToIndex = (!performRearrange) ? 'title' : 'src';
// get current number of columns being displayed
currentColumnCount = $('.autofit-photo-grid').css('column-count');
// create arrays to store values in
var originalPhotoMatrix, reversePhotoMatrix, columnPerimeters;
originalPhotoMatrix = new Array();
reversePhotoMatrix = new Array();
columnPerimeters = new Array();
// loop through all the images to compare their left & top perimeters to determine their cell position
$('.autofit-photo-grid img').each(function() {
// if the left perimeter is not found in the array, its a new column
if (columnPerimeters.indexOf($(this).offset().left) == -1)
columnPerimeters[columnPerimeters.length] = $(this).offset().left; // create new columnPerimeter record
}); // end loop
// sort the columns to be in consecutive order
columnPerimeters = columnPerimeters.sort(function(a, b) {
return a - b
});
// now that we have the perimeters of each column, let's figure out which cell each photo belongs to
var colCounter = 1;
var rowCounter = 1;
// loop through all the raw image objects again
$('.autofit-photo-grid img').each(function() {
// get the current position of the image again to determine which column it's in
var currentOffset = $(this).offset().left;
// get the column based on the position of the current image
var currentCol = columnPerimeters.indexOf(currentOffset) + 1;
// if we encounter a new column, reset and increment our col/row counters accordingly
if (currentCol != colCounter) {
colCounter++;
rowCounter = 1;
}
// assign the matrix index to a data attr on the img
$(this).attr('data-matrix-key', rowCounter + ',' + colCounter);
// assign original and reverse matrix values
originalPhotoMatrix[rowCounter + ',' + colCounter] = $(this).attr(attributeToIndex);
reversePhotoMatrix[colCounter + ',' + rowCounter] = $(this).attr(attributeToIndex);
// increment the row counter before restarting the loop
rowCounter++;
}); // end loop
// sort the original matrix by key so that it's in the proper order before generating key list for
// final version of reversePhotoMatrix
originalPhotoMatrix = ksort(originalPhotoMatrix);
// assign matrix id by looping through existing matrix keys/indexes
var availableKeys = new Array(); // create array to store keys/indexes in
for (var key in originalPhotoMatrix) { // loop through the keys and contents of the original matrix
availableKeys[availableKeys.length] = key; // add this key to the list of available keys
} // end loop
// generate the new photo matrix based on the next available key from the old matrix
var c = 0; // intialize counter
reversePhotoMatrix = new Array(); // clear array to prevent any unused/leftover/nonexistent values from lingering
// loop through the images....AGAIN
$('.autofit-photo-grid img').each(function() {
// determine the next available matrix key/index based on the current counter value
var nextAvailableKey = availableKeys[c];
// reassign new key/index and value to reverse photo matrix
reversePhotoMatrix[nextAvailableKey] = $(this).attr(attributeToIndex);
c++; // increment the counter before restarting the loop
}); // end loop
// finally, loop through all the original matrix items and grab the corresponding item from the reverse matrix
console.log("\n\nRearrange ready\n\n"); // just a console comment
// loop through all keys and values in the original matrix
for (var key in originalPhotoMatrix) {
if (!performRearrange) // if performRearrange=false, only display console output
console.log('Swap ' + originalPhotoMatrix[key] + ' with ' + reversePhotoMatrix[key]);
if (performRearrange) // if performRearrange=true, perform the actual rearrangement
$('.autofit-photo-grid img[data-matrix-key="' + key + '"]').attr(attributeToIndex, reversePhotoMatrix[key]);
} // end loop
} // end rearrangePhotos function
// This is just to attach the click event to the text/link at the top
$('.rearrange-link').click(function() {
// on the first click, call rearrangePhotos(performRearrange=false)
rearrangePhotos(false);
// Now change the link text to instruct the next click
$(this).text('Now rearrange them');
// Now attempt to rearrange the actual photo sources with rearrangePhotos(performRearrange=true)
$(this).click(function() {
rearrangePhotos(true);
});
});
// Run the rearrangePhotos() function everytime the window size is adjusted
$(window).resize(function() {
if (currentColumnCount != $('.autofit-photo-grid').css('column-count'))
rearrangePhotos(false);
});
不幸的是在這個例子中有空格類似於當你只是顯示圖像的右下方他們通常在一條線上。 :( – SISYN