我不太确定如何用正确的词语表达我的问题,但我试着描述我想做的事情.
假设我们从数据库中获得了一组数据(例如数字),它们需要作为列表输出.我在一行中放置了预定义数量的数据字段(对于dekstop系统).每个数据都在SPAN中,具有颜色/边距/填充样式. (与表格单元格一样.)达到该数量的Spans后,会给出强制换行符.并且每次换行时,该“行”中所有跨距的背景颜色都会改变(奇数/偶数).到目前为止没问题.
但是,如果现在有人用智能手机检查该页面(或者您只是简单地调整浏览器窗口的大小),则预定义的数量不适合.例如,在大分辨率下,你有6个Spans并排,彩色奇数,6个Spans颜色均匀.在一个小分辨率你可能只有3个Spans并排,但在我的设计中你还有6个Spans色的奇数,所以两个“行”在改变之前具有相同的背景颜色.
示例HTML输出:
<span class="odd">Number 01</span>
<span class="odd">Number 02</span>
<span class="odd">Number 03</span>
<span class="odd">Number 04</span>
<span class="odd">Number 05</span>
<span class="odd">Number 06</span>
<br/>
<span class="even">Number 07</span>
<span class="even">Number 08</span>
<span class="even">Number 09</span>
<span class="even">Number 10</span>
<span class="even">Number 11</span>
<span class="even">Number 12</span>
<br/>
我完全不知道是否可能了解 – 可能通过Javascript或CSS,在“行”中显示多少个跨度,以自动化奇偶颜色,使其以某种方式响应.
检查我的Fiddle可能会更好地展示我想要的东西.
解决方法:
我想不出用CSS来解决这个问题,但这是一个javascript解决方案.浏览器支持有点偏差.没有意识到你在帖子中标记了jQuery,但它至少应该适用于现代浏览器:
window.addEventListener('resize', function(){
var cells = document.querySelectorAll('.odd,.even');
var activeClass='even', activeLine = 0;
for(var i = 0, len = cells.length; i < len; i++) {
cells[i].classList.remove('odd');
cells[i].classList.remove('even');
if(activeLine != cells[i].offsetTop + cells[i].offsetHeight) {
activeClass = (activeClass === 'even') ? 'odd' : 'even';
activeLine = cells[i].offsetTop + cells[i].offsetHeight
}
cells[i].classList.add(activeClass);
}
});
/* edit: forgot to dispatch the event.
jQuery makes this so much easier to write
than the monstrosity below. */
var event;
event = document.createEvent("HTMLEvents");
event.initEvent("resize", true, true);
window.dispatchEvent(event);
在这里演示:http://jsfiddle.net/xh0o6gvy/1
编辑:这是Sunny在the comment below的小提琴中放置的jQuery版本.如果需要与旧版浏览器兼容,这绝对是比上述代码更好的方法.
function colorSpans() {
var containers = $('.span_container');
containers.each(function() {
var activeClass = 'even';
var activeLine = 0;
var cells = $(this).children('.odd, .even');
cells.each(function() {
$(this).removeClass('odd even');
var offset = $(this).offset();
var height = $(this).outerHeight();
if(activeLine != offset.top + height) {
activeClass = (activeClass === 'even') ? 'odd' : 'even';
activeLine = offset.top + height;
}
$(this).addClass(activeClass);
});
});
}
$(window).on('resize', function() {
colorSpans();
});
colorSpans();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。