JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="demoApp">
    <div ng-controller="TestCtrl">
        <div id="first">
            <list item-source="items" id="list"></list>
        </div>
        <div>Total: {{items.length}}
            <button type="button" ng-click="prepend(1);">Prepend (1)</button>
            <button type="button" ng-click="prepend(3);">Prepend (3)</button>
            <button type="button" ng-click="prepend(9);">Prepend (9)</button>
            <br/>
            <br/>
            <input type="text" ng-model="manualCount" />
            <button type="button" ng-click="prepend(manualCount);">Prepend ({{manualCount}})</button>
        </div>
    </div>
</body>

CSS

#first {
    width:50%;
}
#list {
    display: block;
    width: 322px;
    height: 300px;
    overflow: auto;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
#list_wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}
#list_wrapper .item {
    box-sizing: border-box;
    flex-direction: row;
    width: 100px;
    height: 150px;
    flex-wrap: wrap;
    padding:5px;
}

JavaScript

(function(angular) {
    var app = angular.module('demoApp', []).controller('TestCtrl', function($scope) {
        $scope.items = [];
        $scope.count = 0;
        $scope.manualCount = 0;
        $scope.prepend = function(count){
            for(var i = 1; i <= count; i++){
                $scope.count++;
                $scope.items.unshift({
                    imageSrc: 'http://placehold.it/90x140&text='+$scope.count
                });
            }
        };
    }).directive('list', ['$timeout', function($timeout){
        return {
            restrict: "EA",
            transclude: false,
            replace: false,
            template: '<div id="list_wrapper"><div list-item ng-repeat="item in itemSource track by $index" class="item"><img ng-src="{{item.imageSrc}}"/></div></div>',
            scope: {
                itemSource: '='
            },
            compile: function(){
                return {
                    pre: function(scope, element, attrs, ctrl){
                        ctrl.setElement(element[0]);
                    }
                };
            },
            controller: function($scope){
                var element = '';
                $scope.linesCount = 0;
                var colcount = 3;
                this.setElement = function(el){
                    element = el;
                };
                this.addItem = function(item){
                    var newLinesCount = Math.ceil($scope.itemSource.length / colcount);
                    var linesInserted = newLinesCount - $scope.linesCount;
                    if(linesInserted > 0){
                        var prevScroll = element.scrollTop;
                        $scope.$evalAsync(function () {
                            var newScroll = prevScroll + (item.clientHeight * linesInserted);
                            element.scrollTop = newScroll;
                        });
                        
                    }
                    $scope.linesCount =...