The problem is given by the use of the javascript function inside your foreach loop @foreach($row as $photo)
.
@foreach($row as $photo)
<script type="text/javascript">
$(function(){
var boxes =
document.getElementsByClassName("box");
$(boxes).css('background-image',
'url({{ url('img/user_images/images/'. $photo->source_name) }} )');
});
each loop you are rewriting the whole javascript function, and since it does a getElementsByClassName("box"); you are overriding all the boxes div with the last image retrieved by $photos->getCollection()->all()
.
To have a different image for each box individually you should replace the use of the class attribute and use an id, like this:
<div class="row">
@foreach($row as $photo)
<script type="text/javascript">
$(function(){
$("#box-{{$photo->id}}").css('background-image',
'url({{ url('img/user_images/images/'. $photo->source_name) }} )');
});
</script>
<article class="col-md-3">
<a href="{{ url('photos/'. $photo->id) }}"><div
id="box-{{$photo->id}}" class="box"></div></a>
</article>
@endforeach
</div>