代碼喜歡燈箱示例

Question

我正在尋找famo.us的Lightbox演示代碼示例。不幸的是，codepen中的應用程序的有趣部分在着名的.lib.js的鋼筆版本中得到了解決。

這不是我感興趣的整個畫廊的東西，它的「只是」一個行中有多個元素的可視視圖，取決於它們的大小和屏幕大小。

有沒有人在開發像這樣的視圖/佈局的經驗？

在此先感謝

Answer 1

我一直在做一些Scrollview和GridLayout的工作。您可以根據contextSize和target/min單元格大小計算網格維度。

下面是一個讓你開始的例子。我基本上是在Scrollview中添加一個gridLayout作爲唯一的視圖。我知道這可能對滾動視圖有效的渲染工作，該滾動視圖將始終呈現整個網格，但我正是爲了這個例子。我在gridLayout周圍使用Modifier來確保總是計算視圖的大小，並且scrollview始終滾動正確的數量。所以無論如何，這裏是我做過什麼..

var Engine   = require('famous/core/Engine'); 
var Surface   = require('famous/core/Surface'); 
var RenderNode  = require('famous/core/RenderNode'); 
var Modifier  = require('famous/core/Modifier'); // edited 
var Scrollview  = require('famous/views/Scrollview'); 
var GridLayout  = require('famous/views/GridLayout'); 

var context = Engine.createContext(); 

var scrollViews = []; 

var scrollview = new Scrollview(); 
scrollview.sequenceFrom(scrollViews); 

var gridCells = []; 

var grid = new GridLayout(); 
grid.sequenceFrom(gridCells); 

grid.mod = new Modifier(); 

var cellCount  = 24; 
var cellMinWidth = 200.0; 

grid.mod.sizeFrom(function(){ 

    var size  = context.getSize(); 
    var cellsX  = Math.floor(size[0]/cellMinWidth); 
    var cellsY  = Math.ceil(cellCount * 1.0/cellsX); 
    var cellHeight = size[0] * 1.0/cellsX; 

    grid.setOptions({dimensions:[cellsX,cellsY]}); 

    return [undefined,cellsY*cellHeight]; 
}); 

grid.node = new RenderNode(); 
grid.node.add(grid.mod).add(grid); 


for (var i = 0; i < cellCount; i++) { 
    var surface = new Surface({ 
    size:[undefined,undefined], 
    properties: { 
     backgroundColor:'hsl('+(i*360/12)+',75%,50%)' 
    } 
    }); 

    gridCells.push(surface); 
    surface.pipe(scrollview); 

}; 

scrollViews.push(grid.node); 

context.add(scrollview); 

FWIW要真正最大限度地滾動型的效率，就需要有順序地渲染視圖列表。由於我們只在scrollview中渲染一個視圖，所以我們總是渲染所有內容。我想到了解決這個問題的一些方法，但都超出了範圍，就是這個例子。

1. 你可以自己做可見性檢查，並基於scrollview的位置渲染節點。

2. 您可以爲每一行創建一個gridLayout，然後使用列表操作技術管理每個網格中的單元格。

獎金：

如果你只想使用網格佈局只是爲了修飾，我發現使用_modifiers屬性，而有幫助的（注：僅提供部署後）。我能夠使用這種技術創建可重新排列的佈局。曲面都在網格佈局之外浮動，只能通過基於gridlayouts修改器的可拖動修改器進行定位。那這裏是工作演示..

http://higherorderhuman.com/examples/rearrangeable.html

希望這有助於！