CSS列（照片网格）从左到右而不是从上到下显示

Question

I'm using columns to create a photo grid that fits all the supplied photos together without any whitespace between them.

Here is the CSS I'm using:

.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;
}

Here is a sample fiddle showing the issue: https://jsfiddle.net/es7hLuq4/

If you hover over each image, you will see that they say "photo 1", "photo 2", etc. but the order goes like this

1    4    7
2    5    8
3    6    9

But I would like it go like this

1    2    3
4    5    6
7    8    9

Is this possible with pure CSS? If not, are there any clean jQuery solutions that could help? I thought about looping through each image element and attempting to check which column it's in, but that seemed messy (would have to repeat on resize) and I also do not know how to check which column an element is currently in.

Any ideas how to achieve the same auto-fit grid effect but list consecutive items left to right rather than top to bottom?

Answer 1

I have solved the issue by using matrix indexes for each image. The first completed version is a bit rough, and will sometimes get the reordering a little off when adjacent images have drastically different aspect ratios.

I will be working on an updated version that accounts for image dimensions and will update the answer and fiddle when it is complete.

I've used this JS/jQuery for the sample rearrangement function:

Sample 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

This will order the items in the way you want and maintain the images' aspect ratio. But the images have fixed height, so it has a slightly different image-resizing behavior than what you originally have. 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>