dynamically loading images from list

Question

I have below piece of code in html and i want to get images from list . But sizes of section under which images are defined are different. So i am not sure how can i acheive this dynamic loading of images from list. I am using visual webpart and have defined html in .ascx file as below

 <article class="idea col-xs-12 col-sm-6 col-lg-4">
      <div class="image">
        <a href="#">
          <img src="mygal/images/1.jpg" alt="" />
        </a>
        <div class="ide">
          <a href="#">
            <p>
              <strong>Testing</strong>
              <span class="name">/Vijay</span>
            </p>
          </a>
                                    </div>
      </div><!-- /.image -->
    </article>



    <article class="idea col-xs-12 col-sm-6 col-md-3 col-lg-2">
      <div class="image-small">
        <a href="#">
          <img src="mygal/images/2.jpg" alt="" />
        </a>
        <div class="ide">
          <a href="#">
            <p>
              <strong>Test123</strong>
              <span class="name">/K12</span>
            </p>
          </a>
                                   </div>
      </div><!-- /.image -->
    </article>

You can see first artical has different class and second article has different class. So i will have total 20 article section in page with this pattern. One with bit bigger size and other with smaller size.

How can i load data from list using jquery or javascript in my webpart. I am using sharepoint 2013. The text defined under strong and span section will also be dynamic.

Update1 I now have code which loads item from list into table. Still not sure how i load images which is under different article class.

Also i would like how i can load top 10 rows using below code

 <div>
  <table id="tblcategories">

</table>

var ctx= new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle("ListTest");

ctx.load(list); //Retrieves the properties of a client object from the server.
ctx.load(items);

var table = $("#tblcategories");
var innerHtml = "<tr><td>ID</td><td>Category Id</td>";

//Execute the Query Asynchronously
ctx.executeQueryAsync(
    Function.createDelegate(this, function () {
        var itemInfo = '';
        var enumerator = items.getEnumerator();
        while (enumerator.moveNext()) {
            var currentListItem = enumerator.get_current();
            innerHtml += "<tr><td>" + currentListItem.get_item('Title') + "</td><tr>";
        }
        table.html(innerHtml);
    }),
    Function.createDelegate(this, fail)
    );

function fail() {
    debugger;
    alert(arguments[1].get_message());
}