0

该插件的文档不存在，或者我是盲人，但我正在寻找一种方法：

  • 强制 elastic-grid jQuery 插件每行显示 3 个项目
  • 强制过滤器选择器（网格上方的弹性网格导航栏）与页面中心对齐

这是我的函数（为简单起见，所有值都替换为占位符）：

<script type="text/javascript">
$(function(){
  $("#elastic_grid").elastic_grid({
    'showAllText' : 'All',
    'filterEffect' : 'popup',
    'hoverDirection' : true,
    'hoverDelay' : 0,
    'hoverInverse' : false,
    'expandingSpeed' : 500,
    'expandingHeight' : 364,
    'items' : [
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list': [
          { 
            'title' : 'Visit Website',
            'url' : '<url>',
            'new_window' : true
          },
        ],
        'tags' : ['tag1']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window' : true 
          },
        ],
        'tags' : ['tag2']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window' : true
          },
        ],
        'tags' : ['tag3']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window' : true
          },
        ],
        'tags' : ['tag4']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window' : true
          },
        ],
        'tags' : ['tag5']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window':true
          },
        ],
        'tags' : ['tag6']
      },
    ]
  });
});
</script>

如果可能的话，我在哪里可以定义：

  • 每行的项目数
  • 过滤器选择器的对齐方式（即'All' | 'Tag1' | 'Tag2' | etc）
4

1 回答 1

1

请记住，这是一个私人项目，来自一个没有真正维护的人，最后一次提交的事情是 3 年前提交的，文档非常差，实际上是 8 个月前更新的。文档中没有关于在行中设置图像数量的任何内容，但是它们是响应式的，从我所见，它们是 250x250px，您可以利用它来发挥自己的优势，并将它们包装在 >750px 的容器中，并且应该只有其中 3 个（即 800 像素以提供一些填充），如果您需要其中 2 个，则将其值设置为大于 500 像素但小于 750 像素。

至于导航栏，这个 CSS 将重置顶部导航上的浮动并将导航设置为中心：

body nav#porfolio-nav {
  text-align: center;
}

body .wagwep-container ul#portfolio-filter li {
  float: none;
}

body nav#porfolio-nav li{
  float: none;
}
于 2017-09-23T04:21:06.307 回答