This example uses $.each() to loop through a JSON file and identify the object that matches the clicked image. Click any U.S. president to see information about him. The JSON file is accessed with an $.ajax() call to the server (really not necessary, but I was working with $.ajax()).
First, jQuery loads the images into a CSS flexbox container, which distributes them in a grid. Note that by default, flexbox would distort the images that are shorter in height than others in their row; the property to correct that is align-self. Ideally, in this layout, all the images should be the same width and height. These images are all 300 pixels wide, but the height varies.
You should see 45 presidential portraits above.