在3列中构建可下载的内容 [英] build a downloadable content in 3 columns
本文介绍了在3列中构建可下载的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从JSON中获取响应，并希望将其粘贴到3列中.我正在使用引导类 col-md-4 和angularjs作为框架..我想连续排列3个元素，但是当内容太大时，它会分解，看起来像:
I take responce from JSON and wanna to paste it in 3 columns. I'm using bootstrap class col-md-4 and angularjs as framework.. I want to line up 3 elements in a row, but when content is too big - it breaks down and looks like :
请参阅以下 plnkr(全屏显示)
推荐答案
如果您只想在单行内无限放置3列@ 992px或更大(col-md-4)，只需在以下位置清除列的浮点数即可媒体查询.
If you simply want to place 3 columns infinitely inside a single row @ 992px or greater (col-md-4), simply clear the float of your columns at that media query.
@media (min-width: 992px) {
.col-md-4:nth-child(3n+1) {
clear: left;
}
}
*请勿直接将其应用于col-md-4，因为它将随后全局应用于该类.
*Don't apply this directly to col-md-4 since it would then apply to that class globally.
清除列浮点示例
var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
$scope.list = [{
name: 'John1',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John2',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John3',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John4',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John5',
text: ['asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas']
}, {
name: 'John6',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John7',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John8',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John9',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John10',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}]
}).grid-item-inner {
background: #333;
color: white;
border: 1px solid red;
padding: 0px 10px 10px;
margin: 10px 0;
}
@media (min-width: 991px) {
.grid-item:nth-child(3n+1) {
clear: left;
}
}<html ng-app="App">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="Ctrl">
<div class="container">
<div class="row">
<div class="col-md-4 grid-item" ng-repeat="item in list">
<div class="grid-item-inner">
<h3>{{item.name}}</h3>
<ul class="list-unstyled">
<li ng-repeat="thing in item.text track by $index">{{thing}}</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
</body>
</html>或者，如果您尝试将每一列都直接放在彼此之间(砌体布局)，则一种方法是使用MasonryJS.参见角度砌体.
Or if you're trying to place each column directly below one another (masonry layout), one way is with MasonryJS. See Angular-Masonry.
AngularJS砌体示例指令
'use strict';
angular.module('ngMasonry', [])
.controller('masonryController', function() {
var vm = this;
vm.config = {};
vm.container = undefined;
vm.ready = ready;
vm.initialize = initialize;
vm.reLayout = reLayout;
function ready() {
return !!vm.config && !!vm.config.masonryContainer;
}
function initialize() {
var defaultOpts = {
itemSelector: vm.config.masonryItem
},
opts = !vm.config.masonryOption ? defaultOpts : angular.extend(defaultOpts, vm.config.masonryOption);
vm.container = new Masonry(vm.config.masonryContainer, opts);
if (typeof imagesLoaded !== 'undefined') {
new imagesLoaded(vm.config.masonryContainer, function() {
vm.reLayout();
});
}
}
function reLayout() {
vm.container.layout();
}
})
.directive('masonry', function() {
var directive = {
restrict: 'A',
controller: 'masonryController',
compile: compile
};
return directive;
function compile(element, attributes) {
var flag = false,
child = angular.element(document.querySelectorAll('[' + attributes.$attr.masonry + '] [data-masonry-item], [' + attributes.$attr.masonry + '] [masonry-item]'));
angular.forEach(child, function(obj) {
obj = angular.element(obj);
if (obj.attr('ng-repeat') !== undefined || obj.attr('data-ng-repeat') !== undefined) {
flag = true;
obj.attr('data-masonry-after-render', '');
}
});
return {
pre: function(scope, element, attributes, controller) {
controller.config.masonryContainer = '[' + attributes.$attr.masonry + ']';
controller.config.masonryOptions = JSON.parse(attributes.masonryOptions || '{}');
},
post: function(scope, element, attributes, controller) {
if (!flag) {
controller.initialize();
}
}
};
}
})
.directive('masonryItem', function() {
var directive = {
restrict: 'A',
require: '^masonry',
priority: 1,
compile: compile
};
return directive;
function compile() {
return {
pre: function(scope, element, attributes, controller) {
if (controller.config.masonryItem === undefined) {
controller.config.masonryItem = '[' + attributes.$attr.masonryItem + ']';
}
}
};
}
})
.directive('masonryAfterRender', function($timeout) {
'ngInject';
var directive = {
restrict: 'A',
require: '^masonry',
priority: 0,
link: link
};
return directive;
function link(scope, element, attr, controller) {
if (scope.$last) {
var timeout = null;
timeout = $timeout(function() {
controller.initialize();
$timeout.cancel(timeout);
});
}
}
});
//Your Code Starts Here
var app = angular.module('App', ['ngMasonry']);
app.controller('Ctrl', function($scope) {
$scope.list = [{
name: 'John1',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John2',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John3',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John4',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John5',
text: ['asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas', 'asdfasdfas']
}, {
name: 'John6',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John7',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John8',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs', 'asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John9',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}, {
name: 'John10',
text: ['asdfasdfasdfasdfasfsadfasdfsdfs']
}]
}).grid-item-inner {
background: #333;
color: white;
border: 1px solid red;
padding: 0px 10px 10px;
margin: 10px 0;
}
@media (max-width: 992px) {
.grid-item {
width: 100%;
}
}<html data-ng-app="App">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="Ctrl">
<div class="container">
<div class="row" data-masonry>
<div class="col-md-4 grid-item" data-masonry-item data-ng-repeat="item in list">
<div class="grid-item-inner">
<h3>{{item.name}}</h3>
<ul class="list-unstyled">
<li ng-repeat="thing in item.text track by $index">{{thing}}</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
</body>
</html>**一般来说，Bootstrap Grid应该使用以下模式:
**And generally speaking a Bootstrap Grid should use this pattern:
container or container-fluid
row
col-*-*
您当前有一行，后跟一个容器.请参见网格.
You currently have row followed by container. See Grid.
这篇关于在3列中构建可下载的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
