使用angularjs和ui-bootstrap进行谷歌图像布局

Google images layout with angularjs and ui-bootstrap

本文关键字：谷歌 图像 布局 angularjs ui-bootstrap 使用      更新时间：2023-09-26

我想做一个类似于谷歌图像库布局的图像库，但我找不到任何有用的例子来接近。我想在使用angularjs点击的图像的正下方或上方显示较大的图像。

我开始工作在一个活塞的例子，但不知道如何实现这一点。我可以在所有图像的顶部或下方显示图像。关于如何使用angularjs和ui-bootstrap实现这一目标的任何想法。提前感谢。

活塞链接:https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview

视图: 

<div ng-controller="CollapseDemoCtrl">
    <div ng-repeat="image in images track by $index">
      <img src="{{image}}" ng-click="collapse=!collapse; setImage(image)" style="height:100px;width:100px;float:left;padding:20px;cursor:pointer">
    </div>
    <div>
      <img uib-collapse="collapse" src="{{img}}"style="height:500px;width:500px;padding:20px">
    </div>
</div>

你差一点就成功了。唯一需要做的就是在中继器中移动图像。

添加到你的控制器。

$scope.setImage = function(index){
  $scope.visibleIndex = index;
}

加上你的标记:

<div ng-show="visibleIndex == $index"><br />
  <img src="{{image}}" style="height:500px;width:500px;padding:20px">
</div>

我已经更新了你的活塞:https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview

相关文章：