如何使用引导程序在一行中存在 3 个缩略图后创建新行
How to create new row after 3 thumbnails exist in one row with bootstrap
我想在每行放置 3 个缩略图,我使用的是"col-md-4"。但是,如果有 4+ 个缩略图,则会创建一个新行,并且 3 个缩略图将位于该新行中。我该怎么做?
FB.api('/me/albums?fields=picture', 'get', {
access_token: userToken
}, function(response) {
var data = response.data;
for (var i = 0, l = response.data.length; i < l; i++) {
var pictureUrl = data[i].picture.data.url;
$("#albumPicturesModalBody").append("<div class='"col-md-4'"><a class='"thumbnail albumPicture'"><img src='"" + pictureUrl + "'" alt='"...'" class='"img-rounded'"></a></div>");
}
});
<div class="modal" id="albumPicturesModal" style="padding-top: 70px;" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Select An Album</h4>
</div>
<div class="modal-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;">
<div class="row" id="albumPicturesModalBody">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
这是
对您的另一个问题的回答:"如何根据图像数量计算引导行数"
function howManyRows(totalImages) {
var count = Math.round(totalImages / 3);
return count;
}
console.log(howManyRows(50)); // output: 17
您可以使用类似的东西来确定要在此处为您的其他函数请求创建多少行。
相关文章:
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- 如何使用Spring MVC将Facebook返回的响应数据保存在Java类中
- 用于检查数组中是否存在元素的javascript自定义方法
- 通过点击按钮翻转缩略图
- 未捕获的类型错误:无法读取属性'name'即使它存在,也无法定义
- 正在将事件处理程序添加到不存在的类
- 是否存在React Native“;WEB代码安全防护”;
- 一个密码测试程序,如果存在空格,它会提醒用户
- 验证会话中是否存在对象's数组
- javascript如果图像不存在don't加载它
- 如何查找值是否存在于二叉树中
- IE9的HTML5 Canvas getImageData()函数存在问题
- 由于响应中不存在“Access Control Allow Origin”标头,跨域请求停止工作
- CORS-服务器端cookie没有保存在chrome浏览器上
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 检查是否存在使用chrome扩展的javascript库
- 如何使用引导程序在一行中存在 3 个缩略图后创建新行
- 将鼠标悬停在缩略图上以启动新图像;悬停结束后,新图像仍然存在