像Lightbox示例的代码

Question

我正在寻找来自famo.us的Lightbox演示的代码示例.不幸的是,codepen中应用程序的有趣部分在着名的.lib.js的笔版本中得到了证实.

这不是整个画廊的事情我很感兴趣,它"只是"一个scollable在一排多个元素,这取决于它们的尺寸和屏幕大小视图.

有没有人像这样开发视图/布局的经验？

提前致谢

Answer 1

我一直在使用Scrollview和GridLayout做一些工作.您可以根据contextSize和target/min单元格大小计算网格尺寸.

这是一个让你入门的例子.我实际上是在Scrollview中添加gridLayout作为唯一视图.我知道这可能对滚动视图有效渲染有效,因为scrollview将始终渲染整个网格,但我这样做是为了举例.我在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的效率,您需要有一个按顺序呈现的视图列表.由于我们只在scrollview中渲染一个视图,因此我们始终都在渲染所有内容.我想到了几种解决这个问题的方法,这个例子超出了范围.

1. 您可以自己进行可见性检查,并根据scrollview的位置渲染节点.

2. 您可以为每一行创建gridLayout,然后使用列表操作技术管理每个网格中的单元格.

奖金:

如果您只想将GridLayout用于修饰符,我发现使用_modifiers属性非常有用(注意:仅在部署后可用!).我能够使用这种技术创建一个可重新排列的布局.曲面全部浮动在gridlayout外部,并且仅基于gridlayouts修改器通过其draggable修改器定位.这是那个工作演示..

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

希望这可以帮助!