Flow : "compact" vertically on horizontal flow

m2dtkast

I am using a Flow Item to recreate a "cascade" of items

like this (note : I added the layout items to try to solve this, but it didnt work:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Flow{
        //anchors.fill:parent
        width:parent.width
        Rectangle{
            color:"red"
            width:parent.width / 2
            height:30
            Layout.alignment: Layout.Top
            Layout.preferredHeight: height
            Layout.fillHeight: false
        }
        Rectangle{
            color:"blue"
            width:parent.width / 2
            height:60
            Layout.alignment: Layout.Top
            Layout.preferredHeight: height
            Layout.fillHeight: false
        }
        Rectangle{
            color:"green"
            width:parent.width / 2
            height:30
            Layout.alignment: Layout.Top
            Layout.preferredHeight: height
            Layout.fillHeight: false
        }
        Rectangle{
            color:"pink"
            width:parent.width / 2
            height:50
            Layout.alignment: Layout.Top
            Layout.preferredHeight: height
            Layout.fillHeight: false
        }
        Rectangle{
            color:"yellow"
            width:parent.width / 2
            height:30
            Layout.alignment: Layout.Top
            Layout.preferredHeight: height
            Layout.fillHeight: false
        }
    }
}

How can I compact the smaller items on the right and get rid of the "empty" white areas?

EDIT :
Here's the version with a repearter, same result:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    ListModel {
        id:myModel
        ListElement{
            color: "red"
            height: 30
        }
        ListElement{
            color:"blue"
            height:60
        }
        ListElement{
            color:"green"
            height: 30
        }
        ListElement{
            color:"pink"
            height:50
        }
        ListElement{
            color:"yellow"
            height:30
        }
    }
    Flow{
        //anchors.fill:parent
        width:parent.width
        Repeater{
            model : myModel
            delegate:Rectangle{
                color:model.color
                width:parent.width / 2
                height:model.height
                Layout.alignment: Layout.Top
                Layout.preferredHeight: height
                Layout.fillHeight: false
            }
        }
    }
}

m2dtkast

As a reply;
the qquickflow class (implemented in qtdeclarative) does not support individual heights.
We will customize this component with our own version.