是否可以在砌体网格中排列闪亮的应用程序卡片？

Question

我目前正在尝试从数据框中为一个业余爱好 Shiny 应用程序创建 "wall" 卡片。改编自此，这是我的代码的最小完整示例：

library(shiny)

df <- read.csv("https://github.com/intelligence-refinery/shiny_app/raw/master/flyer.csv")

card <- function(img, item, store) {
    HTML(
        paste0(
            '<div class="card">
              <div class="container">
              <h4><b>', item, '</b></h4>
              </div>
              <img src="', img, '" style="width:100%">
              <div class="container">
              <h5><i>', store, '</i></h5>
              </div>
              </div>'
        )
    )
}


ui <- fluidPage(
    tags$head(tags$style('.card {
                         width: 250px;
                       clear: both;
                       /* Add shadows to create the "card" effect */
                       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                       transition: 0.3s;
                       }
                       /* On mouse-over, add a deeper shadow */
                       .card:hover {
                       box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                       }
                       /* Add some padding inside the card container */
                       .container {
                       width: 250px;
                       padding: 2px 16px;
                       }')),
    uiOutput("cards")
)

server <- function(input, output, session) {
    output$cards <- renderUI({
        # First make the cards
        args <-
            lapply(1:dim(df)[1], function(x)
                card(df[x, "clean_image_url"],
                     store = df[x, "store_name"],
                     item = df[x, "name"]))

        # Make sure to add other arguments to the list:
        args$cellArgs <- list(style = "
            width: 300px;
            height: auto;
            margin: 5px;
            ")

        # basically the same as flowLayout(cards[[1]], cards[[2]],...)
        do.call(shiny::flowLayout, args)

    })
}


# Preview the UI in the console
shinyApp(ui = ui, server = server)

但是，这会导致卡片之间出现难看的间隙，因为它们的大小不同：

A masonry grid layout 在这种情况下是理想的：

由于我对任何类型的 Web 工作都很陌生，我不确定如何将纯粹的 CSS/Javascript 解决方案应用到我的 Shiny 应用程序中。我试图改编 Bootstrap docs 中的示例，但是当我将 HTML 和 CSS 粘贴到 CodePen 时，我没有得到完整的示例...

我发现最接近在 Shiny 应用程序中创建砖石网格的示例是（相当复杂）conference Twitter dashboard. I found the relevant section in the code。但是，由于我对任何网络作品都很陌生，我无法将其适应我自己的代码。

有没有办法为以这种方式生成的卡片面板创建砌体布局？任何帮助将不胜感激！ :)

Answer 1

如果您可以将图像分成一些有意义的列，那么在布置水平布局之前，您可以将图像组包装在 column 中。然后用 fluidRow 排列列。

这是一个仅使用您数据的前 20 行的示例。仅粘贴 server。另一个变化是在加载数据后添加df <- df[1:20,]：

 server <- function(input, output, session) {
    output$cards <- renderUI({
        # First make the cards
        args <-
            lapply(1:dim(df)[1], function(x)
                card(df[x, "clean_image_url"],
                     store = df[x, "store_name"],
                     item = df[x, "name"]))

        # Make sure to add other arguments to the list:
        args$cellArgs <- list(style = "
            width: 300px;
            height: auto;
            margin: 5px;
            ")

        # make five columns with four images each
        cols <-
          lapply(seq(4, dim(df)[1], 4), function(x) {
              column(width = 2, verticalLayout(args[(x - 3):x], fluid = TRUE))
          })


        # then use fluidRow to arrange the columns 
        do.call(shiny::fluidRow, cols)

    })
}

你应该得到这样的东西：

是否可以在砌体网格中排列闪亮的应用程序卡片？

Is it possible to arrange Shiny app cards in a masonry grid?

layout

r

shiny

masonry