Update

src/Timeline.vue

@@ -11,8 +11,8 @@
             @update="scrollChange"
         >
             <h1 v-if="item.head" class="head">Vue is awesome!</h1>
-            <div v-else class="user">
-                {{ item.name }}
+            <div v-else class="photo">
+                <img v-for="img of item.photos" :src="img.src" :key="img.file_id" />
             </div>
         </RecycleScroller>
     </div>
@@ -21,20 +21,17 @@
 <script>
 export default {
     data() {
-        const list = [];
-        for (let i = 0; i < 1000; i++) {
-            list.push({
-                id: i,
-                name: 'bla' + i,
-                size: 32,
-            })
-        }
         return {
-            list: list,
-            count: list.length,
+            list: [],
+            count: 0,
+            ncols: 5,
         }
     },
 
+    mounted() {
+        this.fetchList();
+    },
+
     methods: {
         genList() {
             this.count++;
@@ -47,9 +44,66 @@ export default {
                 head: true,
             })
         },
+
         scrollChange(startIndex, endIndex) {
             console.log('scrollChange', startIndex, endIndex);
         },
+
+        async fetchList() {
+            const res = await fetch('/apps/betterphotos/api/list');
+            const data = await res.json();
+            const nrows = Math.ceil(data.length / this.ncols) + 5;
+
+            this.list.push({
+                id: -1,
+                size: 64,
+                head: true,
+            });
+
+            // Add n rows to the list
+            for (let i = 0; i < nrows; i++) {
+                this.list.push({
+                    id: i,
+                    photos: [],
+                    size: 100,
+                })
+            }
+
+            const headIdx = 0;
+            let rowIdx = headIdx + 1;
+
+            // Add all rows
+            for (const p of data) {
+                // Check if we ran out of rows
+                if (rowIdx >= this.list.length || this.list[rowIdx].head) {
+                    this.list.splice(rowIdx, 0, {
+                        id: rowIdx,
+                        photos: [],
+                        size: 100,
+                    });
+                }
+
+                // Go to the next row
+                if (this.list[rowIdx].photos.length >= this.ncols) {
+                    rowIdx++;
+                }
+
+                // Add the photo to the row
+                this.list[rowIdx].photos.push({
+                    id: p.file_id,
+                    src: `/core/preview?fileId=${p.file_id}&x=250&y=250`,
+                });
+            }
+
+            // Get rid of any extra rows
+            let spliceCount = 0;
+            for (let i = rowIdx + 1; i < this.list.length && !this.list[i].head; i++) {
+                spliceCount++;
+            }
+            if (spliceCount > 0) {
+                this.list.splice(rowIdx + 1, spliceCount);
+            }
+        },
     },
 }
 </script>
@@ -59,8 +113,13 @@ export default {
     height: 300px;
 }
 
-.user {
-    height: 32px;
+.photo {
+    height: 100px;
+}
+.photo img {
+    height: 100px;
+    width: 100px;
+    object-fit: cover;
 }
 .head {
     height: 64px;