Столбцы CSS (фотосетка) отображаются слева направо, а не сверху вниз

Question

Я использую столбцы, чтобы создать сетку фотографий, которая соответствует всем поставленным фотографиям вместе без пробелов между ними.

Вот CSS я использую:

.autofit-photo-grid { 
    /* Prevent vertical gaps */ 
    line-height: 0; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 0; 
    -moz-column-count: 3; 
    -moz-column-gap: 0; 
    column-count: 3; 
    column-gap: 0; 
} 

.autofit-photo-grid img { 
    /* Just in case there are inline attributes */ 
    width: 100% !important; 
    height: auto !important; 
    border: 1px solid #777; 
    opacity: 0.85; 
} 

Вот пример, показывающий скрипку вопрос: https://jsfiddle.net/es7hLuq4/

При наведении курсора на каждом изображении, вы увидите, что они говорят, «фото 1 »,„фото 2“, и т.д., но в порядке идет, как этот

1 4 7 
2 5 8 
3 6 9 

но я хотел бы это пойти, как это

1 2 3 
4 5 6 
7 8 9 

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

Любые идеи, как добиться того же эффекта автоматической настройки сетки, но список последовательных элементов слева направо, а не сверху вниз?

Answer 1

Я решил проблему с помощью матричных индексов для каждого изображения. Первая завершенная версия немного грубая и иногда немного переупорядочивается, когда смежные изображения имеют совершенно разные пропорции.

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

Я использовал этот 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); 
}); 

Answer 2

Это будет заказ предметов так, как вы хотите, и сохраните пропорции изображений. Но изображения имеют фиксированную высоту, поэтому он имеет несколько другое поведение, изменяющее размер изображения, чем то, что вы изначально имели. https://jsfiddle.net/s1bppsjo/2/

.autofit-photo-grid { 
    display: flex; 
    flex-wrap: wrap; 
} 

.autofit-photo-grid img { 
    height: 200px; 
    border: 1px solid #777; 
    opacity: 0.85; 
} 

.autofit-photo-grid img:hover { 
    box-shadow: 0 0 12px #333; 
    opacity: 1; 
} 

<div class="autofit-photo-grid"> 
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" alt="" title="Photo 1" /> 
    <img src="http://www.bestmotherofthegroomspeeches.com/wp-content/themes/thesis/rotator/sample-1.jpg" alt="" title="Photo 2" /> 
    <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_10.jpg" alt="" title="Photo 3" /> 
    <img src="http://imgsv.imaging.nikon.com/lineup/dslr/d600/img/sample01/img_05_l.jpg" alt="" title="Photo 4" /> 
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_nikkor28-300mmf_35-56gd_ed_vr/img/sample/sample2_l.jpg" alt="" title="Photo 5" /> 
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/singlefocal/normal/af-s_50mmf_18g/img/sample/sample1_l.jpg" alt="" title="Photo 6" /> 
    <img src="http://www.forkingandcountry.com/sites/g/files/g2000004371/f/sample1.jpg" alt="" title="Photo 7" /> 
    <img src="http://www.olympusimage.com.sg/content/000010885.jpg" alt="" title="Photo 8" /> 
    <img src="http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg" alt="" title="Photo 9" /> 
    <img src="https://www.ricoh.com/r_dc/r/r8/img/sample_08.jpg" alt="" title="Photo 10" /> 
</div>