photos show up BUT all disorganized?

$(document).ready(function(){
  $('button').click(function(){
    $('button').removeClass('selected');
    $(this).addClass('selected'); 

     let animal = $(this).text(); //get text from html elem.
    $.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',
              {
                tags: animal,
                format: "json"
              },   
              function(data){
                let photoHTML = '<ul>';
                $.each(data.items, function(i, photo) {
                  photoHTML += '<li class="grid-25 tablet-grid-50">';
                  photoHTML += '<a href="' + photo.link + '" class=image">';
                  photoHTML += '<img src="'+ photo.media.m + '"></a></li>';
                }); //end each
                  photoHTML += '</ul>';
                  $('#photos').html(photoHTML); 

                } //end callback function
    ); //end .getJSON
  });// end click event handler   
}); //end ready